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",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,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 方法不會快取資料，並且常用於連同請求一起傳送資料。
實際應用中多用到語法一 語法二， 語法三較少
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。