jQuery.ajaxComplete() 函式使用詳解

ajaxComplete()函數用來設定當AJAX請求完成(無論成功或失敗)時執行的回呼函數。

這是一個全域AJAX事件函數，用於為所有AJAX請求的ajaxComplete事件綁定事件處理函數。當AJAX請求完成(無論成功或失敗)時，將觸發ajaxComplete事件，並執行綁定的事件處理函數。

該函數必須在jQuery物件實例上調用，ajaxComplete()將為每個匹配元素的ajaxComplete事件綁定處理函數。當AJAX請求完成後，所有符合元素上的處理函數都會被觸發執行。事件處理函數內的this將指向目前DOM元素。

你可以在同一元素中多次呼叫該函數，從而綁定多個事件處理函數。觸發ajaxComplete事件時，jQuery會依照綁定的先後順序依序執行綁定的事件處理函數。

從jQuery 1.8開始，函數只能為document物件的ajaxComplete事件綁定處理函數，為其他元素綁定的事件處理函數不會運作。

如果在jQuery.ajax()或jQuery.ajaxSetup()中將選項參數global設為false，可以禁止該AJAX請求觸發全域的AJAX事件。

此函數屬於jQuery物件(實例)。

語法

jQuery 1.0 新增此函數。

jQueryObject.ajaxComplete( handler )

參數

參數 說明

handler Function類型觸發事件時，需要執行的事件處理函數。

回呼函數handler有3個參數：其一是表示當前事件的Event對象，其二是發送當前AJAX請求的jqXHR對象，其三是包含為本次AJAX請求設置的所有參數選項(包括無需指定的預設參數選項)的Object物件。

jqXHR物件是經過jQuery封裝的類似XMLHttpRequest的物件。

傳回值

ajaxComplete()函數的回傳值為jQuery類型，傳回目前jQuery物件本身。

範例&說明

請參考以下HTML範例程式碼：

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>

以下是與ajaxComplete()函數相關的jQuery範例程式碼，以示範ajaxComplete()函數的具體用法：

以下程式碼請基於1.8之前版本的jQuery來運行(請注意，透過ajaxComplete()設定的事件處理函數與透過$.ajax()的complete選項設定的回呼函數，它們的參數是不同的)。

// 当前 jQuery版本：1.7.2 (必须是1.8之前的版本)
$("div").ajaxComplete( function(event, jqXHR, options){
    alert("处理函数1： 当前元素的id为" + this.id + "，请求的url为" + options.url);
} );
$("div").ajaxComplete( function(event, jqXHR, options){
    alert("处理函数2：请求方式为" + options.type);
} );
// 执行该AJAX请求，会弹出6次对话框
// 因为当前页面有3个div元素，我们为每个div元素绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
} );
// 执行该AJAX请求，会弹出7次对话框
// 因为$.ajax()自己通过complete选项绑定了一个ajaxComplete事件处理函数，这个事件处理函数是绑定在document上的，document只有一个，因此只执行一次
// 当前页面还有3个div元素，我们为每个div元素绑定了2个事件处理函数
// 因此总共弹出7次对话框
$.ajax( {
    url: "myurl" ,
    complete: function(jqXHR, textStatus){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为：null、'success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror'等
        
       alert( "ajax()" );
    }
} );

如果目前jQuery為1.8以上版本，上述jQuery程式碼總共只會跳出對話方塊一次。因為從jQuery 1.8開始，ajaxComplete事件的處理函數必須綁定到document物件上才能生效。

因此，不論當前jQuery為何版本，如果不是特殊需求，我們都應該將ajaxComplete事件的處理函數綁定到document物件上。

$(document).ajaxComplete( function(event, jqXHR, options){
    alert("处理函数1：请求的url为" + options.url);
} );
$(document).ajaxComplete( function(event, jqXHR, options){
    alert("处理函数2：请求方式为" + options.type);
} );
// 执行该AJAX请求，会弹出2次对话框
// 因为document对象上绑定了2个事件处理函数
$.ajax( {
    url: "index.html"
//  , global: false // 可以禁止触发全局的Ajax事件
} );
// 执行该AJAX请求，会弹出3次对话框
// 因为$.ajax()自己通过complete选项绑定了一个局部的ajaxComplete事件处理函数，它也在document对象上，会执行一次
// 我们还通过ajaxComplete()额外绑定了两个事件处理函数，会再弹出2次
$.ajax( {
    url: "myurl" ,
    complete: function(jqXHR, textStatus){
        // jqXHR 是经过jQuery封装的XMLHttpRequest对象
        // textStatus 可能为：null、'success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror'等
       alert( "ajax()" );
    }
//  , global: false // 可以禁止触发全局的Ajax事件
} );

以上是jQuery.ajaxComplete() 函式使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！