Json,AJAX

发表于 | 分类于
字数统计: 1.3k | 阅读时长 ≈ 6

json概念

json是一种轻量级的数据交换格式。
1、比xml更为轻量，解析速度更快。
2、数据交换指的是客户端和服务器之间业务数据的传递格式。

json在javaScipt中的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// json的定义
var jsonObj = {
		"key1":666,
		"key2":"qwer",
		"key3":true,
		"key4":[111,"abc",false],
		"key5":{
			"key5_1":222,
			"key5_2":"aaaa"
		},
		"key6":[{"key6_1_1":333,"key6_1_2":444},{"key6_2_1":555}]
};
alert(jsonObj);//object  json就是一个对象
alert(jsonObj.key1);// 666
alert(jsonObj.key4[1])// abc
// json对象转字符串
var jsonString = JSON.stringify(jsonObj);
alert(jsonString);符串
// json字符串转json对象
var jsonObj2 = JSON.parse(jsonString);
alert(jsonObj2);

json的存在有两种形式：
1、对象的形式：操作json中的数据时，使用json对象；
2、字符串的形式：客户端与服务端之间进行数据交换时，使用json字符串。
JSON.stringify()：把json对象转换为json字符串
JSON.parse()：把json字符串转换为json对象

json在java中的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
public class JsonTest {
    // javaBean和json的相互转换
    @Test
    public void test1(){
        Person p1 = new Person(10001,"Tom");
        Gson gson = new Gson();
        // javaBean转json字符串
        String p1JsonString = gson.toJson(p1);
        System.out.println(p1JsonString);
        // json字符串转javaBean
        Person p2 = gson.fromJson(p1JsonString, Person.class);
        System.out.println(p2);
    }

    @Test
    // List 和json的相互转换
    public void test2(){
        List<Person> personList = new ArrayList<Person>();
        personList.add(new Person(10001,"Tom"));
        personList.add(new Person(10002,"Tony"));
        personList.add(new Person(10003,"Nick"));

        Gson gson = new Gson();
        // List转json字符串数组
        String jsonStringArr = gson.toJson(personList);
        System.out.println(jsonStringArr);
        // json字符串数组转List
        // List<Person> personList1 = gson.fromJson(jsonStringArr, new PersonListType().getType());
        List<Person> personList1 = gson.fromJson(jsonStringArr, new TypeToken<List<Person>>(){}.getType());
        System.out.println(personList1);
        System.out.println(personList1.get(1));
    }

    @Test
    // Map 和json的相互转换
    public void test3(){
        Map<Integer,Person> personMap = new HashMap<Integer, Person>();
        personMap.put(1,new Person(10001,"Tom1"));
        personMap.put(2,new Person(10002,"Tom2"));
        personMap.put(3,new Person(10003,"Tom3"));
        Gson gson = new Gson();
        // Map转json字符串集合
        String jsonStringMap = gson.toJson(personMap);
        System.out.println(jsonStringMap);
        // json字符串集合转Map
        // Map<Integer,Person> personMap1 = gson.fromJson(jsonStringMap, new PersonMapList().getType());
        Map<Integer,Person> personMap1 = gson.fromJson(jsonStringMap, new TypeToken<Map<Integer,Person>>(){}.getType());
        System.out.println(personMap1);
        System.out.println(personMap1.get(1));
    }
}

ajax请求

AJAX是一种创建交互式网页应用的开发技术。
浏览器通过javaScript异步发起请求，局部更新页面的技术。
浏览器地址栏不会发生变化；局部更新不会舍弃原来页面的内容。

原生AJAX请求

1
2
3
4
5
6
7
8
protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    System.out.println("javaScriptAjax调用了~");
    Person person = new Person(1,"Tony");
    // 将需要返回给客户端的对象转换为json字符串
    Gson gson = new Gson();
    String personJsonString = gson.toJson(person);
    resp.getWriter().write(personJsonString);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        // 使用js发起Ajax请求，访问服务器AjaxServlet中的javascriptAjax()
        function ajaxRequest() {
// 				1、我们首先要创建XMLHttpRequest 
            var xmlHttpRequest = new XMLHttpRequest();
// 				2、调用open方法设置请求参数 open(请求方法,请求地址,异步(true))
            xmlHttpRequest.open("GET", "http://localhost:8080/11_json/ajaxServlet?action=javaScriptAjax", true);
// 				3、在send方法前绑定onreadystatechange事件，处理请求完成后的操作。
            xmlHttpRequest.onreadystatechange = function () {
                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    // 将json字符串转换为json对象
                    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    // 将响应数据显示在页面上
                    document.getElementById("div01").innerHTML = "编号：" + jsonObj.id + "<br/>姓名：" + jsonObj.name;
                }
            }
            // 4、调用send方法发送请求
            xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

jquery中的ajax请求

$.ajax 方法
url：表示请求的地址
type：表示请求的类型GET 或POST 请求
data：表示发送给服务器的数据
data的格式有两种：
一：name=value&name=value
二：{key:value}
success：请求成功，响应的回调函数
dataType：响应的数据类型
常用的响应数据类型有：text、xml、json

1
2
3
4
5
6
7
8
9
10
11
12
13
// ajax请求
$("#ajaxBtn").click(function () {
    $.ajax({
        url: "http://localhost:8080/11_json/ajaxServlet",
        data: "action=jqueryAjax",
        type: "GET",
        success: function (data) {
            alert("服务器返回的数据：" + data);
            $("#msg").html("编号：" + data.id + " 姓名：" + data.name);
        },
        dataType: "json"
    });
});

$.get 方法和$.post 方法
url： 请求的url 地址
data： 发送的数据
callback： 成功的回调函数
type ：返回的数据类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// ajax--get请求
$("#getBtn").click(function () {
    $.get(
        "http://localhost:8080/11_json/ajaxServlet",
        "action=jqueryAjax",
        function (data) {
            alert("服务器返回的数据：" + data);
            $("#msg").html("编号：" + data.id + " 姓名：" + data.name);
        },
        "json"
    );
});

// ajax--post请求
$("#postBtn").click(function () {
    // post请求
    $.post(
        "http://localhost:8080/11_json/ajaxServlet",
        "action=jqueryAjax",
        function (data) {
            alert("服务器返回的数据：" + data);
            $("#msg").html("编号：" + data.id + " 姓名：" + data.name);
        },
        "json"
    );
});

$.getJSON 方法
url： 请求的url 地址
data： 发送给服务器的数据
callback： 成功的回调函数

1
2
3
4
5
6
7
8
9
10
// ajax--getJson请求
$("#getJSONBtn").click(function () {
    $.getJSON(
        "http://localhost:8080/11_json/ajaxServlet",
        "action=jqueryAjax",
        function (data) {
            alert("服务器返回的数据：" + data);
            $("#msg").html("编号：" + data.id + " 姓名：" + data.name);
       });
});

表单序列化serialize()
serialize()可以把表单中所有的表单项都获取到，并以name1=value1&name2=value2 的形式拼接。

1
2
3
4
5
6
7
8
9
10
$("#submit").click(function () {
     // 把参数序列化
     var params = $("#form01").serialize();
     $.getJSON("http://localhost:8080/11_json/ajaxServlet",
         "action=serializeAjax&"+params,
          function (data) {
          alert("服务器返回的数据：" + data);
          $("#msg").html("编号：" + data.id + " 姓名：" + data.name);
     });
});