標籤：char 需要 response err span 根據 相容性問題 迭代 pass
一、Ajax簡介
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“非同步Javascript和XML”。即使用Javascript語言與伺服器進行非同步互動，傳輸的資料為XML（當然，傳輸的資料不只是XML）。
AJAX特點：
AJAX優缺點：
優點：
缺點：
二、jQuery實現的AJAX
{% load staticfiles %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="{% static ‘JS/jquery-3.1.1.js‘ %}"></script></head><body><button class="send_Ajax">send_Ajax</button><script> //$.ajax的兩種使用方式: //$.ajax(settings); //$.ajax(url,[settings]); $(".send_Ajax").click(function(){ $.ajax({ url:"/handle_Ajax/", type:"POST", data:{username:"Yuan",password:123}, success:function(data){ alert(data) }, //=================== error============ error: function (jqXHR, textStatus, err) { // jqXHR: jQuery增強xhr // textStatus: 請求完成狀態 // err: 底層通過throw拋出的異常對象，值與錯誤類型有關 console.log(arguments); }, //=================== complete============ complete: function (jqXHR, textStatus) { // jqXHR: jQuery增強xhr // textStatus: 請求完成狀態 success | error console.log(‘statusCode: %d, statusText: %s‘, jqXHR.status, jqXHR.statusText); console.log(‘textStatus: %s‘, textStatus); }, //=================== statusCode============
後端發送狀態代碼代碼
obj=HttpResponse("OK")
obj.status_code=304
return obj
前端代碼 statusCode: { ‘403‘: function (jqXHR, textStatus, err) { console.log(arguments);
//注意：後端類比errror方式：HttpResponse.status_code=500 測試時使用 }, ‘400‘: function () { } } }) })</script></body></html>
success：過程執行正常時走的函數error：過程出現錯誤觸發的函數complete：不管怎樣都會觸發的函數statusCode：根據狀態代碼觸發的函數
2.1：$.ajax參數
請求參數
######################------------data---------################ data: 當前ajax請求要攜帶的資料，是一個json的object對象，ajax方法就會預設地把它編碼成某種格式 (urlencoded:?a=1&b=2)發送給服務端；此外，ajax預設以get方式發送請求。 function testData() { $.ajax("/test",{ //此時的data是一個json形式的對象 data:{ a:1, b:2 } }); //?a=1&b=2######################------------processData---------################processData：聲明當前的data資料是否進行轉碼或預先處理，預設為true，即預先處理；if為false， 那麼對data：{a:1,b:2}會調用json對象的toString()方法，即{a:1,b:2}.toString() ,最後得到一個［object，Object］形式的結果。 ######################------------contentType---------################contentType：預設值: "application/x-www-form-urlencoded"。發送資訊至伺服器時內容編碼類別型。 用來指明當前請求的資料編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交資料， 比如contentType:"application/json"，即向伺服器發送一個json字串： $.ajax("/ajax_get",{ data:JSON.stringify({ a:22, b:33 }), contentType:"application/json", type:"POST", }); //{a: 22, b: 33} 注意：contentType:"application/json"一旦設定，data必須是json字串，不能是json對象######################------------traditional---------################traditional：一般是我們的data資料有數組時會用到 ：data:{a:22,b:33,c:["x","y"]}, traditional為false會對資料進行深層次迭代；
響應參數
/*dataType： 預期伺服器返回的資料類型,伺服器端返回的資料會根據這個值解析後，傳遞給回呼函數。 預設不需要顯性指定這個屬性，ajax會根據伺服器返回的content Type來進行轉換； 比如我們的伺服器響應的content Type為json格式，這時ajax方法就會對響應的內容 進行一個json格式的轉換，if轉換成功，我們在success的回呼函數裡就會得到一個json格式 的對象；轉換失敗就會觸發error這個回呼函數。如果我們明確地指定目標類型，就可以使用 data Type。 dataType的可用值：html｜xml｜json｜text｜script 見下dataType執行個體*/
【前端】Ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
