jquery ajax學習之-ajaxComplete
阿新 • • 發佈：2019-09-21
.ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )返回: jQuery
描述: 當Ajax請求完成後註冊一個回撥函式。這是一個 AjaxEvent。
新增的版本: 1.0.ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )
-
handler(event, XMLHttpRequest, ajaxOptions)
型別:
Function() 被呼叫的函式。
-
handler(event, XMLHttpRequest, ajaxOptions)
型別:
每當一個Ajax請求完成，jQuery就會觸發ajaxComplete事件，在這個時間點所有處理函式會使用.ajaxComplete()方法註冊並執行。
觀察活動中的這種方法，建立一個基本的Ajax載入請求：
| 1 2 3 |
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>
|
在document上繫結事件處理器：
| 1 2 3 |
$(document).ajaxComplete(function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
});
|
現在，我們可以使用任何的jQuery方法構建一個Ajax請求：
| 1 2 3 |
$( ".trigger" ).click(function() {
$( ".result" ).load( "ajax/test.html" );
});
|
當我們點選class為 trigger 的元素並且Ajax請求完成，這個資訊就會顯示。
但是從 jQuery 1.8 開始, .ajaxComplete() 方法只能繫結到 document元素.
注，這段在官網的原文中已經被刪除: 因為.ajaxComplete() 是作為一個jQuery物件例項方法去執行的，回撥函式中，我們可以用this關鍵字作為指定的元素。
無論哪一個Ajax請求被完成，所有ajaxComplete處理函式都將被執行。如果我們必須區分不同的請求,我們可以使引數傳遞給這個處理函式。 他是通過事件物件， XMLHttpRequest 物件和設定物件中使用的請求，做每一次ajaxComplete 處理器執行的。舉個例子,我們能限制我們的回撥到只處理事件處理某一特定的URL:
| 1 2 3 4 5 6 |
$(document).ajaxComplete(function(event, xhr, settings) {
if ( settings.url === "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
xhr.responseHTML );
}
});
|
注意: 你可以得到返回的AJAX內容 察看XML和HTML的xhr.responseXML 或 xhr.responseHTML 之間的分別。
其他注意事項：
- 如果
global選項設定為false，呼叫$.ajax()或$.ajaxSetup(),.ajaxComplete()方法將不會被觸發。
例子:
當Ajax請求完成後顯示一個資訊。
| 1 2 3 |
$(document).ajaxComplete(function(event,request, settings) {
$( "#msg" ).append( "<li>Request Complete.</li>" );
});
|