Apprentissage JSON et AJAX

Apprentissage JSON et AJAX

1 、 Json

1.1, qu'est-ce que Json

• JSON (JavaScript Object Notation) est un format d'échange de données léger.
• Il est facile à lire et à écrire. En même temps, il est facile d'analyser et de générer par machine. JSON utilise un format de texte totalement indépendant de la langue.
• json est un format d'échange de données léger.
• Léger fait référence à la comparaison avec xml. L'échange de données fait référence au format de transfert des données commerciales entre le client et le serveur.

1.2. L'utilisation de JSON dans JavaScript.

• json est composé de paires clé-valeur et est entouré d'accolades (accolades).
• Chaque clé est placée entre guillemets, la clé et la valeur sont séparées par deux - points et plusieurs paires clé-valeur sont séparées par des virgules .

var json = {
    
    
"key1":12,
"key2":"abc",
"key3":true,
"key4":[11,"arr",false],
"key5":{
    
    
"key5_1" : 551, 
"key5_2" : "key5_2_value"
},
"key6":[{
    
    
"key6_1_1":6611,
"key6_1_2":"key6_1_2_value"
},{
    
    
"key6_2_1":6621,
"key6_2_2":"key6_2_2_value"
}]
};

• json lui-même est un objet.
• La clé dans json peut être comprise comme un attribut dans l'objet.
• L'accès à la clé dans json est le même que l'accès aux propriétés de l'objet: json object.key

1.2.1 Deux méthodes couramment utilisées dans json

• JSON.stringify () convertit les objets json en chaînes json
• JSON.parse () convertit la chaîne json en objet json (objet JavaScript)

var jsonstr = JSON.stringify({
    
    "a":"Hello","b":"world"});
//结果是 '{a: 'Hello', b: 'World'}'

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

1.3, l'utilisation de Json en java

1.3.1, utilisez gson pour analyser json

• Gson est une bibliothèque de classes Java fournie par Google pour le mappage entre les objets Java et les données JSON.

• Vous pouvez convertir une chaîne JSON en un objet Java et vice versa.

• Gson fournit fromJson () et toJson () deux méthodes directement utilisées pour l'analyse et la génération

• fromJson implémente la désérialisation

• toJson implémente la sérialisation

Utilisez gson pour importer d'abord le package jar gson

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
   <dependency>
       <groupId>com.google.code.gson</groupId>
       <artifactId>gson</artifactId>
       <version>2.8.6</version>
   </dependency>

classe d'entité pojo

public class User {
    
    
    private int age;
    private String name;

    public User() {
    
    
    }

    public User(int age, String name) {
    
    
        this.age = age;
        this.name = name;
    }

    public int getAge() {
    
    
        return age;
    }

    public void setAge(int age) {
    
    
        this.age = age;
    }

    @Override
    public String toString() {
    
    
        return "User{" +
                "age=" + age +
                ", name='" + name + '\'' +
                '}';
    }

    public String getName() {
    
    
        return name;
    }

    public void setName(String name) {
    
    
        this.name = name;
    }
}

@Test
public void test1(){
    
    
    User user = new Person(16,"小明");
    // 创建 Gson 对象实例
    Gson gson = new Gson();
    // toJson 方法可以把 java 对象转换成为 json 字符串
    String userJsonString = gson.toJson(user);
    System.out.println(userJsonString);// {"age":16,"name":"小明"}
    
    // fromJson 把 json 字符串转换回 Java 对象
    // 第一个参数是 json 字符串
    // 第二个参数是转换回去的 Java 对象类型
    User user = gson.fromJson(userJsonString, user.class);
    System.out.println(user);//User{age=16, name='小明'}
}

Conversion de liste et json

 @Test
    public void test2() {
    
    
        List<User> userList = new ArrayList<User>();
        userList.add(new User(16, "张三"));
        userList.add(new User(18, "李四"));
        Gson gson = new Gson();
        //把 List 转换为 json 字符串
        String userListJsonString = gson.toJson(userList);
        System.out.println(userListJsonString);// //[{"age":16,"name":"张三"},{"age":18,"name":"李四"}]
        System.out.println("==================");
        List<User> list = gson.fromJson(userListJsonString, new TypeToken<List<User>>(){
    
    }.getType());
        System.out.println(list);//[User{age=16, name='张三'}, User{age=18, name='李四'}]
    }

Conversion de cartes et de json

@Test
    public void test3(){
    
    
        Map<Integer,User> userMap = new HashMap<Integer, User>();
        userMap.put(1, new User(19, "赵六"));
        userMap.put(2, new User(18, "孙七"));
        Gson gson = new Gson();
        // 把 map 集合转换成为 json 字符串
        String userMapJsonString = gson.toJson(userMap);
        System.out.println(userMapJsonString);//{"1":{"age":19,"name":"赵六"},"2":{"age":18,"name":"孙七"}}
        System.out.println("--------------------------------------------");
        Map<Integer,User> userMap1 = gson.fromJson(userMapJsonString, new
                TypeToken<HashMap<Integer,User>>(){
    
    }.getType());
        System.out.println(userMap1);//{1=User{age=19, name='赵六'}, 2=User{age=18, name='孙七'}}
        User user = userMap1.get(1);
        System.out.println(user);//User{age=19, name='赵六'}
    }

1.3.2, utilisez Jackson pour analyser json

Importer les dépendances de Jackson

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.11.2</version>
</dependency>

@Test
public void test04() throws JsonProcessingException {
    
    
        //创建一个jackson的对象映射器，用来解析数据
        ObjectMapper mapper = new ObjectMapper();
    
        //创建一个对象
        User user = new User(19,"王麻子");

        //将我们的对象解析成为json格式

        String str = mapper.writeValueAsString(user);

		System.out.println(str);//{"age":19,"name":"王麻子"}
    }
}

1.3.3, utilisez FastJson pour analyser json

Importer les dépendances de FastJson

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.70</version>
</dependency>

• JSON

  • JSON représente la conversion de JSONObject et JSONArray

• JSONArray

  • JSONArray représente un tableau d'objets json

• JSONObject

  • JSONObject signifie objet json

1. La méthode parseObject () de la classe JSON réalise la conversion des chaînes json en objets json ou en objets javabean
2. La méthode toJSONString () de la classe JSON réalise la conversion des objets json en chaînes json et des objets javabean en chaînes json

Vous pouvez le tester vous-même. Il est similaire à Jackson gson ci-dessus.

2, AJAX

2.1, qu'est-ce que AJAX

• AJAX signifie "Asynchronous Javascript And XML" (JavaScript et XML asynchrones), qui est JS et XML asynchrones.
• Fait référence à une technologie de développement Web pour créer des applications Web interactives. Ajax est une technologie dans laquelle les navigateurs lancent des requêtes de manière asynchrone via js et mettent partiellement à jour les pages .
• Mise à jour partielle de la requête Ajax, la barre d'adresse du navigateur ne changera pas. La mise à jour partielle ne supprimera pas le contenu de la page d'origine, c'est-à-dire obtiendra des données sans actualisation
• AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon de combiner les normes existantes.

Le noyau d'Ajax est l'objet XMLHttpRequest (XHR). XHR fournit une interface pour envoyer des requêtes au serveur et analyser les réponses du serveur. Possibilité d'obtenir de nouvelles données du serveur de manière asynchrone.

Avantages :

• Peut communiquer avec le serveur sans actualiser la page.
• Vous permet de mettre à jour une partie du contenu de la page en fonction des événements utilisateur.

Effet Ajax exemplaire

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
<script type="text/javascript">
    function LoadPage(){
     
     

        var targetUrl =  document.getElementById('url').value;

        console.log(targetUrl);

        // 从输入框中获取地址 动态加载
        document.getElementById("iframePosition").src = targetUrl;
    }

</script>

<div>
    <p>请输入要加载的地址：<span id="currentTime"></span></p>
    <p>
        <input id="url" type="text" value="https://www.baidu.com/"/>
        <!--当点击提交时 调用LoadPage方法 获取要加载的地址-->
        <input type="button" value="提交" onclick="LoadPage()">
    </p>
</div>
<div>
    <h3>加载页面位置：</h3>
    <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>
</body>
</html>

effet

2.2, AJAX dans jQuery

2.2.1, méthode $ .ajax

• url représente l'adresse demandée

• type indique le type de requête GET ou POST request

• data indique qu'il existe deux formats de données envoyées au serveur:

  • nom = valeur & nom = valeur
  • {valeur clé}

• success La demande est réussie, la fonction de rappel de réponse

• type de données de réponse dataType

  Les types de données couramment utilisés sont le texte pour le texte brut, xml pour les données xml, json pour l'objet json

2.2.2, obtenir et publier des demandes

• $ .get / post (url, [données], [rappel], [type])

• url: l'adresse URL demandée.

• data: les paramètres véhiculés par la requête.

• callback: fonction de rappel lorsque le chargement est réussi.

• type: définissez le format du contenu renvoyé, xml, html, script, json, text, _default.

Utilisez ajax pour réaliser la fonction d'invite de connexion utilisateur

@RequestMapping("/ajax")
public String ajaxTest(String name,String pwd){
    
    

    String msg = "";

    //在数据库中查找数据与前端用户输入的数据比较
    if (name!=null){
    
    
        if ("admin".equals(name)){
    
    //这里将数据写死了 实际上是从数据库中查找
            msg = "OK";
        }else {
    
    
            msg = "用户名输入错误";
        }
    }
    if (pwd!=null){
    
    
        if ("123456".equals(pwd)){
    
    

           msg = "OK";
        }else {
    
    

            msg = "密码输入有误";
        }
    }
    return msg; 
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <%--导入jquery库--%>
    <script src="*****"></script>
    <script>
        function name(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax",

                data:{'name':$("#name").val()},

                success:function (data) {

                    if (data.toString()=='OK'){

                        $("#userInfo").css("color","green");

                    }else {

                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }
        function password(){
            $.post({
                url:"${pageContext.request.contextPath}/ajax",
                data:{'pwd':$("#pwd").val()},

                success:function (data) {

                    if (data.toString()=='OK'){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            });
        }
    </script>
</head>
<body>
<p>
    用户名:<input type="text" id="name" οnblur="name()"/>
    <span id="userInfo"></span>
</p>
<p>
   密码:<input type="text" id="pwd" οnblur="password()"/>
    <span id="pwdInfo"></span>
</p>
</body>
</html>

Vous pouvez lire les informations en ligne pour apprendre AJAX et JSON

Recommander l'apprentissage de la station AJAX et JSON-Learning Video B: toujours Silicon Valley AJAX ou Mad God a dit java

Merci à tous d'avoir lu! S'il y a une erreur dans ce qui précède, veuillez la corriger