Jquery的$.ajax、$.get、$.post發送、接收JSON數據及回調函數用法

平時研究代碼時，經常會遇到AJAX的相關用法，做項目時才真正體會到Ajax的強大之處（與服務器數據交互如此之便捷，更新DOM節點而不用刷新整個頁面），以及運用的頻繁程度。今天整理了一下自己之前沒搞清楚的地方以及一些常規用法。

首先不得不說數據格式，ajax接收返回數據時，必須將獲取到的json數組反序列化為json對象。

{"result": "hello, jenny"}              //json數組 Object { result: "hello, jenny" } //json對象

調試時，console.log(data), 其中‘data’為ajax返回數據，若顯示的為第一個格式，即為json數組，此時通過jquery改變某個DOM的值是不會有效果的，但是也不會有錯誤提示。初學者可能比較崩潰。。

var json_object = jQuery.parseJSON(json_str);

此時，如上代碼，即可轉換為JSON對象，此時再將返回值賦予某個DOM即可實現效果。

下面就引出jQuery中發送Ajax請求的幾個常見方法。

$.ajax()

形式：$.ajax({url,data,type,...});
可選字段：
1）url：鏈接地址，字符串表示
2）data：需發送到服務器的數據，GET與POST都可以，格式為{A: '...', B: '...'}
3）type："POST" 或 "GET"，請求類型
4）timeout：請求超時時間，單位為毫秒，數值表示
5）cache：是否緩存請求結果，bool表示
6）contentType：內容類型，默認為"application/x-www-form-urlencoded"
7）dataType：服務器響應的數據類型，字符串表示；當填寫為json時，回調函數中無需再對數據反序列化為json
8）success：請求成功后，服務器回調的函數
9）error：請求失敗后，服務器回調的函數
10）complete：請求完成后調用的函數，無論請求是成功還是失敗，都會調用該函數；如果設置了success與error函數，則該函數在它們之后被調用
11）async：是否異步處理，bool表示，默認為true；設置該值為false后，JS不會向下執行，而是原地等待服務器返回數據，並完成相應的回調函數后，再向下執行
舉例：【后端代碼見最下方】

<button class="btn btn-default" id="button1">發送1</button> <div id="ret">abc</div>

    $("#button1").on('click',function(){ $.ajax({ url: "/greet", data: {name: 'jenny'}, type: "POST", //dataType: "json", success: function(data) { console.log(data); data = jQuery.parseJSON(data); // dataType注釋了，故需要轉換為JSON對象  console.log(data); $("#ret").text(data.result); } }); });

筆者推薦大家用這種寫法，雖然比$.post、$.get寫起來稍微麻煩一點，但是它被稱為"jQuery中Ajax系列方法之母"，原因在於可以很方便得實現各項其他配置，比如設置同步處理、設置success回調函數等。其中ajax的success和error方法根據響應狀態碼來觸發。當服務器的鏈接相應成功，即狀態碼為200的時候，表示響應成功，此時自動觸發success().其他狀態碼則觸發error()。$.post和$.get對於success和error的支持，寫起來就沒有$.ajax這么簡單。

$.post()

該方法使用POST方式執行Ajax請求，從服務器加載數據。

形式：$.post(url, data, func, dataType);
可選參數：
1）url：鏈接地址，字符串表示
2）data：需要發送到服務器的數據，格式為{A: '...', B: '...'}
3）func：請求成功后，服務器回調的函數；function(data, status, xhr)，其中data為服務器回傳的數據，status為響應狀態，xhr為XMLHttpRequest對象，個人感覺關注data參數即可
4）dataType：服務器返回數據的格式
舉例：

<button class="btn btn-default" id="button2">發送2</button> <div id="ret">abc</div>

 $("#button2").on('click',function(){
　　　 //$.ajaxSettings.async = false;　 //flase 表示同步處理，即等待回調函數執行完畢之后，再執行ajax代碼塊下面的JS代碼，而不是同時執行
        $.post(
            "{{ url_for('greet') }}",
            {name: 'Brad'},
            function(data) {
                $('#ret').text(data.result);
            },
            "json"
        );
    });

 

注意“json”的返回格式，也可以不寫，如果不寫，就必須先將返回數據轉化為JSON對象才可以使用。

$.get()

該方法使用GET方式執行Ajax請求，從服務器加載數據。

形式：$.get(url, data, func, dataType);
其各個參數所示意義與$.post()一致，在此不再列出，唯一區別就是請求類型是GET。

舉例：

<button class="btn btn-default" id="button3">發送3</button> <div id="ret">abc</div>

    $("#button3").on('click',function(){ $.get( "{{ url_for('greet') }}", {name: 'Brad'}, function(data) { $("#ret").text(data.result); }, "json" ); });

$.getJSON()

該方法使用GET方式執行Ajax請求，從服務器加載JSON格式數據。

形式：$.getJSON(url, data, func);

因為確定服務器返回json編碼的數據，故相較於$.get()不必再指定dataType。

<button class="btn btn-default" id="button4">發送4</button> <div id="ret">abc</div>

    $("#button4").on('click',function(){ $.getJSON( "{{ url_for('greet') }}", {name: 'jenny'}, function(data) { $("#ret").text(data.result); } ); });

比較常用的還有$.load、$.getScript()等。

后端代碼（Python的Flask框架）：

import json from flask import Flask, request, render_template as rt @app.route('/greet', methods=['GET', 'POST']) def greet(): # GET上傳的數據用request.args獲取，POST上傳的數據用request.form獲取 if request.method == 'GET': name = request.args.get('name') ret = {'result': 'hi, %s' % name} else: name = request.form.get('name') ret = {'result': 'hello, %s' % name} return json.dumps(ret)

文章中如有不正確之處，請交流指出。