JSON&AJAX概述

目錄

一、JSON

1.關於JSON

2.JSON在JavaScript中的使用

2.1、json的定義

2.2、json的訪問

2.3、json的兩個常用方法

3.JSON在java中的使用

3.1、javaBean和json的互轉

3.2、List和json的互轉

3.3、map和json的互轉

二、AJAX

1.關於AJAX

2.原生AJAX請求的示例

3.jQuery中的AJAX請求

3.1、$.ajax 方法

3.2、$.get 方法和$.post 方法

3.3、$.getJSON 方法

3.4、表單序列化 serialize()


一、JSON

1.關於JSON

JSON (JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。JSON採用完全獨立於語言的文本格式,而且很多語言都提供了對 json 的支持(包括 C, C++, C#, Java, JavaScript, Perl, Python等)。 這樣就使得 JSON 成爲理想的數據交換格式。

輕量級指的是跟 xml 做比較。

數據交換指的是客戶端和服務器之間業務數據的傳遞格式。

 

2.JSON在JavaScript中的使用

2.1、json的定義

json 是由鍵值對組成,並且由花括號(大括號)包圍。每個鍵由引號引起來,鍵和值之間使用冒號進行分隔,多組鍵值對之間進行逗號進行分隔。

json定義示例

// json的定義
        var jsonObj = {
            "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"
            }]
        };

 

2.2、json的訪問

json 本身是一個對象。

json 中的 key 我們可以理解爲是對象中的一個屬性。

json 中的 key 訪問就跟訪問對象的屬性一樣: json 對象.key

json訪問示例:

        //json的訪問
        alert(typeof(jsonObj));//object json就是一個對象

        
        alert(jsonObj.key1);//12
        alert(jsonObj.key2);//abc
        alert(jsonObj.key3);//true

        alert(jsonObj.key4);//得到數組[11,"arr",false]
        //json中數組的遍歷
        for (var i = 0; i < jsonObj.key4.length; i++) {
            alert(jsonObj.key4[i]);
        }

        alert(jsonObj.key5.key5_1);//551
        alert(jsonObj.key5.key5_2);//key5_2_value

        alert(jsonObj.key6);//得到json數組

        //每一個都是json對象
        var jsonItem = jsonObj.key6[0];
        alert(jsonItem.key6_1_1);//6611
        alert(jsonItem.key6_1_2);//key6_1_2_value

 

2.3、json的兩個常用方法

json 的存在有兩種形式:

一種是:對象的形式存在,我們叫它 json 對象。

一種是:字符串的形式存在,我們叫它 json 字符串。

一般我們要操作 json 中的數據的時候,需要 json 對象的格式。

一般我們要在客戶端和服務器之間進行數據交換的時候,使用 json 字符串。

JSON.stringify() json 對象轉換成爲 json 字符串

JSON.parse() json 字符串轉換成爲 json 對象

示例代碼:

        // json對象轉字符串
        // alert(jsonObj);
        //json對象轉換爲字符串
        var jsonObjString = JSON.stringify(jsonObj);
        // alert(jsonObjString);
        //json字符串轉換成爲json對象
        var jsonObj2 = JSON.parse(jsonObjString);
        alert(jsonObj2);

 

3.JSON在java中的使用

需要導包

3.1、javaBean和json的互轉

    /**
     * javabean和json的互轉
     */
    @Test
    public void test1(){
        Person person = new Person(1,"ABC");

        Gson gson = new Gson();
        //java對象轉換成爲json字符串
        String personJsonString = gson.toJson(person);
        System.out.println(personJsonString);

        //把json字符串轉換爲java對象
        Person person1 = gson.fromJson(personJsonString, Person.class);
        System.out.println(person1);

    }

3.2、List和json的互轉

    /**
     * List和json的互轉
     */
    @Test
    public void test2(){

        List<Person> personList = new ArrayList<Person>();

        personList.add(new Person(1,"ABC"));
        personList.add(new Person(2,"DEF"));
        personList.add(new Person(3,"GHI"));
        personList.add(new Person(4,"JKL"));

        Gson gson = new Gson();
        //List轉換爲json字符串
        String personListJsonString = gson.toJson(personList);
        System.out.println(personListJsonString);

        //json字符串轉換爲list集合
        List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
        System.out.println(list);
        Person person = list.get(0);
        System.out.println(person);

    }

3.3、map和json的互轉

    /**
     * map和json的互轉
     */
    @Test
    public void test3(){
        Map<Integer,Person> personMap = new HashMap<Integer, Person>();
        personMap.put(1,new Person(1,"ABC"));
        personMap.put(2,new Person(2,"DEF"));
        personMap.put(3,new Person(3,"GHI"));
        personMap.put(4,new Person(4,"JKL"));

        Gson gson = new Gson();

        //map轉換爲json字符串
        String personMapJsonString = gson.toJson(personMap);
        System.out.println(personMapJsonString);

        //json字符串轉換爲map對象
//        Map<Integer,Person> map = gson.fromJson(personMapJsonString, new PersonMapType().getType());
        //使用匿名內部類方法進行轉換
        Map<Integer,Person> map = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer, Person>>(){}.getType());
        System.out.println(map);
        Person person = map.get(1);
        System.out.println(person);

    }

 

二、AJAX

1.關於AJAX

AJAX 即“Asynchronous Javascript And XML(異步 JavaScript XML),是指一種創建交互式網頁應用的網頁開發技術。

Ajax 是一種瀏覽器通過 js 異步發起請求,局部更新頁面的技術。Ajax 請求的局部更新,瀏覽器地址欄不會發生變化局部更新不會捨棄原來頁面的內容

 

2.原生AJAX請求的示例

<!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">
        function ajaxRequest() {
// 				1、我們首先要創建XMLHttpRequest 
            var xmlHttpRequest = new XMLHttpRequest();
// 				2、調用open方法設置請求參數
            xmlHttpRequest.open("GET", "http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax", true);
// 				4、在send方法前綁定onreadystatechange事件,處理請求完成後的操作。
            xmlHttpRequest.onreadystatechange = function () {

                if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
                    var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                    document.getElementById("div01").innerHTML="編號:"+jsonObj.id+"<br/>用戶名:"+jsonObj.name;
                    //alert(xmlHttpRequest.responseText);
                }
            }

// 				3、調用send方法發送請求
                xmlHttpRequest.send();
        }
    </script>
</head>
<body>
<button οnclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

 

3.jQuery中的AJAX請求

3.1、$.ajax 方法

url 表示請求的地址

type 表示請求的類型 GET POST 請求

data 表示發送給服務器的數據

格式有兩種:

一:name=value&name=value

二:{key:value}

success 請求成功,響應的回調函數

dataType 響應的數據類型

常用的數據類型有:

text 表示純文本

xml 表示

xml 數據

json 表示 json 對象

代碼示例:

            // ajax請求
            $("#ajaxBtn").click(function () {

                $.ajax({
                    url: "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                    // data:"action=jQueryAjax",
                    data: {action: "jQueryAjax"},
                    type: "GET",
                    success: function (data) {
                        //alert("服務器返回的數據爲:"+ data);
                        //var jsonObj = JSON.parse(data);
                        $("#msg").html(" ajax 編號:" + data.id + ",姓名:" + data.name);
                    },
                    dataType: "json"
                });

            });

 

3.2、$.get 方法和$.post 方法

url 請求的 url 地址

data 發送的數據

callback 成功的回調函數

type 返回的數據類型

代碼示例:

            // ajax--get請求
            $("#getBtn").click(function () {

                $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryGet", function (data) {
                    $("#msg").html(" get 編號:" + data.id + ",姓名:" + data.name);
                }, "json");

            });

            // ajax--post請求
            $("#postBtn").click(function () {
                // post請求
                $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryPost", function (data) {
                    $("#msg").html(" post 編號:" + data.id + ",姓名:" + data.name);
                }, "json");

            });

 

3.3、$.getJSON 方法

url 請求的 url 地址

data 發送給服務器的數據

callback 成功的回調函數

代碼示例:

            // ajax--getJson請求
            $("#getJSONBtn").click(function () {
                // 調用
                $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryGetJson", function (data) {
                    $("#msg").html(" getJson 編號:" + data.id + ",姓名:" + data.name);
                })

            });

 

3.4、表單序列化 serialize()

serialize()可以把表單中所有表單項的內容都獲取到,並以 name=value&name=value 的形式進行拼接。

代碼示例:

             // ajax請求
            $("#submit").click(function () {

                alert($("#form01").serialize());
                // 把參數序列化
                $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet","action=jQuerySerialize&"+$("#form01").serialize(),function (data) {
                    $("#msg").html(" Serialize 編號:" + data.id + ",姓名:" + data.name);

                });
            });

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章