Simple à utiliser JSON et AJAX

JSON

JSON (JavaScript Object Notation) est un format d'échange de données léger , facile à lire et à écrire, mais aussi facile pour les machines à analyser et générer. JSON avec totalement indépendant de la langue du texte, de nombreuses langues pour fournir un soutien JSON, JSON est donc la langue (entre le client et le serveur) un excellent échange de données.

A, JSON utilisation en JavaScript

1,1 json défini

//定义
var jsonobj = {
    "key1": 12,
    "key2": "abc",
    "key3": true,
    "key4": [11, "arr", false],
    "key5": {
        "key5_1": 222,
        "key5_2": "value"
    },
    "key6": [
        {
            "key6_1_1": 6611,
            "key6_1_2": "value"
        },
        {
            "key6_2_1": 7777,
            "key6_2_2": true
        }
    ]
};

1.2 Accès JSON

json lui-même est un objet, un attribut clé d'un objet compréhensible

alert(typeof (jsonobj));        //object json是一个对象
alert(jsonobj.key1);            //12
alert(jsonobj.key2);            //abc
alert(jsonobj.key3);            //true
alert(jsonobj.key4);            //数组

//遍历数组
for (let i = 0; i < jsonobj.key4.length; i++) {
    alert(jsonobj.key4[i])
}

Deux méthodes communes 1.3 Json

Json sont présents sous la forme d'une chaîne, et deux formes de l'objet (l'objet lorsque nécessaire format de données json procédure générale, l'échange de données est généralement réalisée à l'aide de la chaîne json)

JSON.stringify (): convertit un objet chaîne json

JSON.parse (): la chaîne de caractères dans un objet json

Deux, l'utilisation JSON dans le serveur

2.1 JavaBean et la conversion entre JSON

//1.JavaBean与json互转
@Test
public void json1() {
    Person person = new Person(1,"磊爷");
    //创建Gson对象实例
    Gson gson = new Gson();
    //toJson：转换为字符串
    String json = gson.toJson(person);
    System.out.println(json);
    //fromJson：转换为对象  json字符串   对象
    Person json1 = gson.fromJson(json, Person.class);
    System.out.println(json1);
}

2.1 Liste et JSON Huzhuan

//2.list和json互转
@Test
public void json2() {
    List<Object> list = new ArrayList<>();
    list.add(new Person(1,"磊爷"));
    list.add(new Person(2,"jsb"));
    list.add(new Person(3,"asb"));
    //转为json字符串
    Gson gson = new Gson();
    String json = gson.toJson(list);
    System.out.println(json);
    //转为对象
    Object json1 = gson.fromJson(json, new TypeToken<List<Person>>(){}.getType());
    System.out.println(json1);
}

2.1 carte et JSON Huzhuan

//3.map和json互转
@Test
public void json3() {
    Map<Integer, Person> map = new HashMap<>();
    map.put(1, new Person(1,"磊爷"));
    map.put(2, new Person(2,"jsb"));
    //转换为字符串
    Gson gson = new Gson();
    String json = gson.toJson(map);
    System.out.println(json);
    //转换为对象
    Object o = gson.fromJson(json, new TypeToken<Map<Integer, Person>>() {
    }.getType());
    System.out.println(o);
}

AJAX

Qu'Ajax "Asynchronous JavaScript And XML" (Asynchronous JavaScript and XML), fait référence à une technique de développement web pour la création d'applications Web interactives

AJAX est un navigateur lance une requête par js asynchrone. La technologie de mise à jour de page partielle

Sync: Le client doit attendre la réponse du serveur. Vous ne pouvez pas effectuer d'autres opérations en attendant

Ne nécessite pas la réponse du serveur: induction

Bien que ajax peut avoir besoin de charger les pages Web, une partie de mise à jour de la page

Une demande d'AJAX native

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            //发送异步请求
            //1.创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2.建立连接
            /*
                 参数：
                    1.请求方式 get、post
                        get方式，请求参数在url后边拼接，send方法为空参
                        post方式，请求参数在send方法中定义
                    2.请求url
                    3.同步false 异步true
             */
            xmlhttp.open("GET","test1.txt",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式：xmlhttp.responseText
            //获取时间：当服务器响应成功后获取
            //当xmlhttp对象就绪状态改变时，会触发事件
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //获取服务器响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
            
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

Deux, demande jQuery AJAX

$ 2.1 méthode .ajax

URL est la demande d'adresse
type représente le type de requête GET / POST
les données indiquent que les données envoyées au serveur
- name = valeur & name = valeur
- {valeur clé}
réponse de succès de demande de rappel, la réponse
Réponse type de données dataType

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            function fun() {
                $.ajax({
                    url:"ajaxServlet",
                    type:"post",
                    //data:"username=jack&age=23"
                    data:{"username": "lei", "age": 23},
                    success: function () {
                        alert("成功了")
                    },

                })
            }
        </script>
    </head>
    <body>
        <input type="button" value="发送异步请求" onclick="fun();">
    </body>
</html>

$ 2.2 .get ()

url
Les données
rappeler
type

2.3 .post de $ ()

url
Les données
rappeler
type