Simples de usar JSON e AJAX

JSON

JSON (JavaScript Object Notation) é um formato de intercâmbio de dados leve , fácil de ler e escrever, mas também fácil para máquinas para analisar e gerar. JSON com totalmente independente do idioma do texto, muitos idiomas oferecem suporte para JSON, então JSON é a linguagem (entre cliente e servidor) uma troca de dados excelente.

utilização A, JSON em JavaScript

1,1 json definida

//定义
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 acesso json

-se json é um objeto, atributo chave para um objeto compreensível

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])
}

Dois métodos comuns 1.3 Json

Json estão presentes sob a forma de uma corda, e duas formas do objecto (o objecto, quando necessário procedimento geral formato de dados json, a troca de dados é geralmente levada a cabo usando a corda json)

JSON.stringify (): converte uma cadeia objeto JSON

JSON.parse (): a cadeia de caracteres em um objeto JSON

Dois, uso JSON no servidor

2.1 JavaBean e a conversão 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 Lista e 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 mapa e 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

Isso AJAX "Asynchronous JavaScript e XML" (Asynchronous JavaScript and XML), refere-se a uma técnica de desenvolvimento web para criar aplicações web interativas

AJAX é um navegador inicia um pedido por js assíncronas. tecnologia de atualização de página parcial

Sincronização: O cliente deve aguardar a resposta do servidor. Você não pode realizar outras operações enquanto espera

Não requer a resposta do servidor: Indução

Enquanto ajax pode precisar de carregar páginas web, atualização parte da página

Uma solicitação AJAX nativo

<!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>

Dois, pedido jQuery AJAX em

método .ajax 2.1 $

url é o pedido de endereço
tipo representa o tipo de solicitação GET / POST
dados indicam que os dados enviados para o servidor
- name = value & name = valor
- {valor chave}
pedido de resposta callback sucesso, a resposta
Response tipo de dados 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
dados
ligue de volta
tipo

2.3 $ .post ()

url
dados
ligue de volta
tipo