jquery ajax幾種書寫方式的總結

Ajax在前端的應用極其廣泛，因此，我們有必要對其進行總結，以方便后期的使用。

AJAX優點：

　　可以異步請求服務器的數據，實現頁面數據的實時動態加載， 在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。

 

jquery在全局對象jquery（也就是$）綁定了ajax()函數，可以處理Ajax請求，ajax常用的配置選項有：

• async  是否異步執行，默認為True,千萬不要指定為False
• method  發送的Method,缺省為“GET”,可指定為‘POST’,'PUT','DELETE', 單詞字母必須大寫
• contentType  發送POST請求的格式，默認值為'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為‘text/plain’  'application/json'
• data  發送給后端的數據，可以是字符串、數組或對象。如果是GET請求，data將被轉換成query附加到url上；如果是POST請求，根據contentType把data序列化成合適的格式
• dataType  接收的數據格式，可以指定為'html' 'xml' 'json' 'text'等，缺省情況下根據響應的Content-Type猜測
• headers 發送的額外的HTTP請求頭，必須是一個Object

 

語法一：$.ajax({name:value, name:value, ...})

# 登錄js代碼
$(".form-login").submit(function (e) {
        e.preventDefault();
        mobile = $("#mobile").val();
        pwd = $("#password").val();
        var data = {
            mobile: mobile,
            pwd: pwd
        };
        $.ajax({
            url: "/api/***",
            type: "POST",
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: "json",
            headers: {"X-CSRFToken": getCookie('csrf_token')},
            success: function (resp) {
                if (resp.error == 0){
                    // resp 是后端通過json.dumps()返回的json格式數據:res={"error":0, "errmsg":"登錄失敗"}
                    // resp = json.dumps(res)
                    // 請求成功，跳轉頁面
                    location.href = '/'
                }
                else {
                    alert(resp.errmsg)
                }
            }
        })
    })

 

語法二：$.get(URL, params, function(resp, status_code){}) 

　　　　URL必需參數；

　　　　params可選參數，params={key:value...}, 會以?key=value&key=value...的方式自動添加到URL后面　　

　　　　function(resp, status_code) 可選參數，是請求成功后所執行的函數，resp是后台返回的數據； states_code是自動生成的響應狀態碼，可缺省

#  更新首頁房源展示信息
var params = {
        aid: 0,
        sd: "2018-2-20",
        ed: "2019-2-29",
        page: 1
    };
$.get("/api/v1_0/houses", params, function(resp){
        if (resp.error == 0){
            $(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses}));
        }
        else {
            $(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses}));
        }
    })

 

語法三：$.post(URL, data, function(resp, states_code){})

　　　　URL必選參數；

　　　　data 可選參數 連同請求發送的數據；

　　　　function(resp, status_code) 可選參數，是請求成功后所執行的函數，resp是后台返回的數據； states_code是自動生成的響應狀態碼，可缺省

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"mjy",
        url:"https://cnblogs.com/We612/"
    },
        function(data,status){
            alert("數據: \n" + data + "\n狀態: " + status);
    });
});

 

說明：　　

　　$.GET 基本上用於從服務器獲得（取回）數據。注釋：GET 方法可能返回緩存數據。

　　$.POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。

　　實際應用中多用到語法一  語法二， 語法三較少