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

AJAX優(yōu)點：

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

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

• async 是否異步執(zhí)行，默認為True,千萬不要指定為False
• method 發(fā)送的Method,缺省為“GET”,可指定為‘POST','PUT','DELETE', 單詞字母必須大寫
• contentType 發(fā)送POST請求的格式，默認值為'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定為‘text/plain' 'application/json'
• data 發(fā)送給后端的數(shù)據(jù)，可以是字符串、數(shù)組或對象。如果是GET請求，data將被轉換成query附加到url上；如果是POST請求，根據(jù)contentType把data序列化成合適的格式
• dataType 接收的數(shù)據(jù)格式，可以指定為'html' 'xml' 'json' 'text'等，缺省情況下根據(jù)響應的Content-Type猜測
• headers 發(fā)送的額外的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格式數(shù)據(jù):res={"error":0, "errmsg":"登錄失敗"}
           // resp = json.dumps(res)
           // 請求成功，跳轉頁面
           location.href = '/'
         }
         else {
           alert(resp.errmsg)
         }
       }
     })
  })

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

　　　　URL必需參數(shù)；

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

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

 # 更新首頁房源展示信息
 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必選參數(shù)；

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

　　　　function(resp, status_code) 可選參數(shù)，是請求成功后所執(zhí)行的函數(shù)，resp是后臺返回的數(shù)據(jù)； states_code是自動生成的響應狀態(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 基本上用于從服務器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。

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

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論