ajaxComplete 事件

類別：Ajax > 全域 Ajax 事件處理常式

.on( "ajaxComplete", handler )傳回：jQuery

說明：註冊一個處理常式，在 Ajax 要求完成時呼叫。這是 AjaxEvent。

此頁面說明 ajaxComplete 事件。有關已棄用的 .ajaxComplete() 方法，請參閱 .ajaxComplete()。

每當 Ajax 要求完成時，jQuery 會觸發 ajaxComplete 事件。此時會執行任何已註冊的 ajaxComplete 處理常式。

要觀察此方法的實際運作，請設定一個基本的 Ajax 載入要求

1
2
3
 
<div class="trigger">Trigger</div>
<div class="result"></div>
<div class="log"></div>

將事件處理常式附加到文件

1
2
3
 
$( document ).on( "ajaxComplete", function() {
  $( ".log" ).text( "Triggered ajaxComplete handler." );
} );

現在，使用任何 jQuery 方法發出 Ajax 要求

1
2
3
 
$( ".trigger" ).on( "click", function() {
  $( ".result" ).load( "ajax/test.html" );
} );

當使用者按一下具有 trigger 類別的元素，且 Ajax 要求已完成時，將顯示記錄訊息。

所有 ajaxComplete 處理常式都會被呼叫，無論完成的是哪個 Ajax 要求。如果您必須區分這些要求，請使用傳遞給處理常式的參數。每次執行 ajaxComplete 處理常式時，都會傳遞事件物件、XMLHttpRequest 物件，以及在建立要求時所使用的設定物件。例如，您可以限制回呼只處理與特定 URL 相關的事件

1
2
3
4
5
6
 
$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
      xhr.responseText );
  }
} );

注意：您可以透過查看 xhr.responseText 來取得傳回的 Ajax 內容。

其他注意事項

  • 從 jQuery 1.9 開始，所有 jQuery 全域 Ajax 事件 的處理常式，包括使用 .on( "ajaxComplete", ... ) 新增的處理常式，必須附加到 document。
  • 如果 $.ajax() 或 $.ajaxSetup() 被呼叫，且 global 選項設定為 false，則 ajaxComplete 事件不會觸發。

範例

在 Ajax 要求完成時顯示訊息。

1
2
3
 
$( document ).on( "ajaxComplete", function( event, request, settings ) {
  $( "#msg" ).append( "<li>Request Complete.</li>" );
} );