Ajax在前端的應(yīng)用極其廣泛，因此，我們有必要對(duì)其進(jìn)行總結(jié)，以方便后期的使用。

AJAX優(yōu)點(diǎn)：

　　可以異步請(qǐng)求服務(wù)器的數(shù)據(jù)，實(shí)現(xiàn)頁(yè)面數(shù)據(jù)的實(shí)時(shí)動(dòng)態(tài)加載， 在不重新加載整個(gè)頁(yè)面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。

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

• async 是否異步執(zhí)行，默認(rèn)為True,千萬(wàn)不要指定為False
• method 發(fā)送的Method,缺省為“GET”,可指定為‘POST','PUT','DELETE', 單詞字母必須大寫
• contentType 發(fā)送POST請(qǐng)求的格式，默認(rèn)值為'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為‘text/plain' 'application/json'
• data 發(fā)送給后端的數(shù)據(jù)，可以是字符串、數(shù)組或?qū)ο蟆Ｈ绻荊ET請(qǐng)求，data將被轉(zhuǎn)換成query附加到url上；如果是POST請(qǐng)求，根據(jù)contentType把data序列化成合適的格式
• dataType 接收的數(shù)據(jù)格式，可以指定為'html' 'xml' 'json' 'text'等，缺省情況下根據(jù)響應(yīng)的Content-Type猜測(cè)
• headers 發(fā)送的額外的HTTP請(qǐng)求頭，必須是一個(gè)Object
  

語(yǔ)法一：$.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格式數(shù)據(jù):res={"error":0, "errmsg":"登錄失敗"}
           // resp = json.dumps(res)
           // 請(qǐng)求成功，跳轉(zhuǎn)頁(yè)面
           location.href = '/'
         }
         else {
           alert(resp.errmsg)
         }
       }
     })
  })

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

　　　　URL必需參數(shù)；

　　　　params可選參數(shù)，params={key:value...}, 會(huì)以?key=value&key=value...的方式自動(dòng)添加到URL后面　　

　　　　function(resp, status_code) 可選參數(shù)，是請(qǐng)求成功后所執(zhí)行的函數(shù)，resp是后臺(tái)返回的數(shù)據(jù)； states_code是自動(dòng)生成的響應(yīng)狀態(tài)碼，可缺省

 # 更新首頁(yè)房源展示信息
 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}));
     }
   })

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

　　　　URL必選參數(shù)；

　　　　data 可選參數(shù) 連同請(qǐng)求發(fā)送的數(shù)據(jù)；

　　　　function(resp, status_code) 可選參數(shù)，是請(qǐng)求成功后所執(zhí)行的函數(shù)，resp是后臺(tái)返回的數(shù)據(jù)； states_code是自動(dòng)生成的響應(yīng)狀態(tài)碼，可缺省

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

說明：　　

　　$.GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。

　　$.POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會(huì)緩存數(shù)據(jù)，并且常用于連同請(qǐng)求一起發(fā)送數(shù)據(jù)。

　　實(shí)際應(yīng)用中多用到語(yǔ)法一 語(yǔ)法二， 語(yǔ)法三較少

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論