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>" );
} );