ajax基本用法介紹

一、基於jQuery的ajax

此時需要在模板中引用jQuery，ajax的本質是利用瀏覽器自帶的XMLHttpRequest對象並通過jQuery將數據和請求頭進行封裝再發送。ajax基本使用方法如下：

$.ajax({
        url:'url',
        type:'POST',
        data:{'k1':v1,'k2':v2,},
        dataType:'JSON',
        traditional:true,
        success:function (arg) {
        }
        error:function () {
        }
    })     

整個ajax的內容包含在$.ajax({  })中

第一行url：指定ajax發送給哪個url進行處理，再通過urls.py文件去執行對應的處理函數

第二行type：ajax發送數據的方式，可以是GET或者POST，如果使用POST方法可先注釋掉csvf中間件

第三行data：ajax發送的數據，需要是字典格式，且v默認是數字或者字符串

第六行success：表示后台處理函數處理成功后，前端再執行的函數，參數arg表示處理函數的返回值，即HttpResponse的返回值，且只能接收字符串格式

第四行dataType：由於success的function函數默認只能接收字符串格式的返回值，因此如果處理函數需要返回其他格式如字典、列表形式的值，需要通過HttpResponse(json.dumps(返回值))傳遞給arg，而在ajax中需要再通過JSON.parse(arg)再將返回值還原為原來的格式，而dataType:'JSON'可以省略前端的JSON.parse(arg)，直接將返回值通過JSON還原為原來的格式后再傳遞給arg。

第五行traditional：ajax發送的數據字典的值默認是數字或者字符串，如果值是列表(不能是字典)，則需要指定traditional:true

第七行error：例如當指定的url錯誤、網絡錯誤等，會執行此函數。

ajax不接收處理函數返回的redirect跳轉，只會根據函數返回的消息內容主動決定是否做刷新或跳轉。

 1.ajax發送get請求

.btn{display:inline-block;background-color: darkgoldenrod;padding: 5px 10px;color: white;cursor: pointer}
……
<a class="btn" onclick="ajaxSubmit3()">點我</a>
……
function ajaxSubmit3() {
    $.ajax({
        url:'ajax1',
        type:'POST',
        data:{'p':123},
        dataType:'json',
        success:function (arg) {
        console.log(arg.status,arg.data)
        }
    })
}

def ajax1(request):
    print(request.GET)
    ret = {'status':'success','data':[1,'hello']}
    return HttpResponse(json.dumps(ret))

     

2.ajax發送post請求

<a class="btn" onclick="ajaxSubmit3()">點我</a>
……
function ajaxSubmit3() {
    $.ajax({
        url:'ajax1',
        type:'POST',
        data:{'p':123},
        dataType:'json',
        success:function (arg) {
        console.log(arg.status,arg.data)
        }
    })
}

def ajax1(request):
    print(request.POST)
    ret = {'status':'success','data':[1,'hello']}
    return HttpResponse(json.dumps(ret))

     

 

二、使用瀏覽器自帶的XMLHttpRequest對象

XMLHttpRequest為瀏覽器自帶的發送數據的對象，使用XMLHttpRequest發送數據時，需要手動加上請求頭。

XmlHttpRequest對象的主要方法：

void open(String method,String url,Boolen async)  #用於創建請求
    method： 請求方式（字符串類型），如：POST、GET、DELETE...            
    url：要請求的地址（字符串類型）
    async：  是否異步（布爾類型）

void send(String body)  #用於發送請求
    body： 要發送的數據（字符串類型）

void setRequestHeader(String header,String value)  #用於設置請求頭
    header： 請求頭的key（字符串類型）
    vlaue：  請求頭的value（字符串類型）

String getAllResponseHeaders()  #獲取所有響應頭
    返回值：響應頭數據（字符串類型）

String getResponseHeader(String header)  #獲取響應頭中指定header的值
    header： 響應頭的key（字符串類型）
    返回值：響應頭中指定的header對應的值

void abort()  #終止請求

Number readyState  #狀態值（整數）
    0-未初始化，尚未調用open()方法；
    1-啟動，調用了open()方法，未調用send()方法；
    2-發送，已經調用了send()方法，未接收到響應；
    3-接收，已經接收到部分響應數據；
    4-完成，已經接收到全部響應數據；
 
Function onreadystatechange
   當readyState的值改變時自動觸發執行其對應的函數（回調函數）
 
String responseText
   服務器返回的數據（字符串類型）
 
XmlDocument responseXML
   服務器返回的數據（Xml對象）
 

1.XMLHttpRequest發送get請求

<a class="btn" onclick="ajaxSubmit2()">點我</a>
……
function ajaxSubmit2() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4)
            console.log(xhr.responseText);
        }
    xhr.open('GET','ajax1');
    xhr.send(null);
}    

def ajax1(request):
    print(request.GET)
    print(request.body)
    ret = {'status':'success','data':[1,'hello']}
    return HttpResponse(json.dumps(ret))

2.XMLHttpRequest發送POST請求

<a class="btn" onclick="ajaxSubmit4()">點我</a>
……
function ajaxSubmit4() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4)
            console.log(xhr.responseText);
    }
    xhr.open('POST','ajax1');
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset-UTF-8');
    xhr.send('p=123;q=456');
}

def ajax1(request):
    print(request.POST)
    print(request.body)
    ret = {'status':'success','data':[1,'hello']}
    return HttpResponse(json.dumps(ret))

①發送post請求時需要先注釋掉csvf中間件

②XMLHttpRequest對象xhr狀態變化時即xhr.readyState的值變化時，會觸發xhr.onreadystatechange。

③如果不為XMLHttpRequest對象設置請求頭，那么后台接收到的數據在request.body中，request.POST中沒有數據；需要用setRequestHeader()方法為其設置請求頭，django才會將接收到的數據同時轉化到request.POST中。

④使用send()發送數據時，整體為字符串，使用k=v形式發送，多個數據之間用分號間隔；