jquery ajax幾種書寫方式的總結

時間 2019-11-30

標籤 jquery ajax 幾種書寫方式總結欄目 JQuery 简体版

原文原文鏈接

Ajax在前端的應用極其普遍，所以，咱們有必要對其進行總結，以方便後期的使用。php

AJAX優勢：html

　　能夠異步請求服務器的數據，實現頁面數據的實時動態加載，在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。前端

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

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, ...})ajax

 1 # 登陸js代碼
 2 $(".form-login").submit(function (e) {
 3         e.preventDefault();
 4         mobile = $("#mobile").val();
 5         pwd = $("#password").val();
 6         var data = {
 7             mobile: mobile,
 8             pwd: pwd
 9         };
10         $.ajax({
11             url: "/api/***",
12             type: "POST",
13             data: JSON.stringify(data),
14             contentType: "application/json",
15             dataType: "json",
16             headers: {"X-CSRFToken": getCookie('csrf_token')},
17             success: function (resp) {
18                 if (resp.error == 0){
19                     // resp 是後端經過json.dumps()返回的json格式數據:res={"error":0, "errmsg":"登陸失敗"}
20                     // resp = json.dumps(res)
21                     // 請求成功，跳轉頁面
22                     location.href = '/'
23                 }
24                 else {
25                     alert(resp.errmsg)
26                 }
27             }
28         })
29     })

$.ajax()

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

　　　　URL必需參數；後端

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

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

 1 #  更新首頁房源展現信息
 2 var params = {
 3         aid: 0,
 4         sd: "2018-2-20",
 5         ed: "2019-2-29",
 6         page: 1
 7     };
 8 $.get("/api/v1_0/houses", params, function(resp){
 9         if (resp.error == 0){
10             $(".house-list").html(template("house-list-tmpl", {houses:resp.data.houses}));
11         }
12         else {
13             $(".house-list").append(template("house-list-tmpl", {houses: resp.data.houses}));
14         }
15     })

$.get()

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

　　　　URL必選參數；

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

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

 1 $("button").click(function(){
 2     $.post("/try/ajax/demo_test_post.php",
 3     {
 4         name:"mjy",
 5         url:"https://cnblogs.com/We612/"
 6     },
 7         function(data,status){
 8             alert("數據: \n" + data + "\n狀態: " + status);
 9     });
10 });