Detailed explanation of jQuery.ajaxComplete() function usage

ajaxComplete() function is used to set the callback function that is executed when the AJAX request is completed (whether successful or failed).

This is a global AJAX event function, used to bind the ajaxComplete event of all AJAX requests Event processing function. When the AJAX request is completed (whether successful or failed), the ajaxComplete event will be triggered and the bound event handler will be executed.

This function must be called on the jQuery object instance, and ajaxComplete() will bind a handler function to the ajaxComplete event of each matching element. When the AJAX request is completed, the processing functions on all matching elements will be triggered and executed. This within the event handler will point to the current DOM element.

You can call this function multiple times on the same element to bind multiple event handlers. When the ajaxComplete event is triggered, jQuery will execute the bound event processing functions in the order of binding.

Starting from jQuery 1.8, this function can only bind handlers to the ajaxComplete event of the document object. Event handlers bound to other elements will not work.

If you set the option parameter global to false in jQuery.ajax() or jQuery.ajaxSetup(), you can prevent the AJAX request from triggering global AJAX events.

This function belongs to the jQuery object (instance).

Syntax

This function is new in jQuery 1.0.

jQueryObject.ajaxComplete( handler )

Parameter

Parameter Description

handler Function type needs to be executed when this event is triggered event handling function.

The callback function handler has three parameters: one is the Event object representing the current event, the other is the jqXHR object that sends the current AJAX request, and the third is all parameter options set for this AJAX request ( Object objects including default parameter options that do not need to be specified).

The jqXHR object is an XMLHttpRequest-like object encapsulated by jQuery.

Return value

ajaxComplete()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following HTML sample code:

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

The following is the jQuery sample code related to the ajaxComplete() function to demonstrate the specifics of the ajaxComplete() function Usage:

Please run the following code based on jQuery versions before 1.8 (please note that the event processing function set through ajaxComplete() and the callback function set through the complete option of $.ajax(), their parameters are different).

// 当前 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()" );
    }
} );

If the current jQuery is version 1.8 and above, the above jQuery code will only pop up the dialog box once in total. Because starting from jQuery 1.8, the handler function of the ajaxComplete event must be bound to the document object to take effect.

Therefore, regardless of the current jQuery version, if there are no special needs, we should bind the ajaxComplete event handler to the document object.

$(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事件
} );

The above is the detailed content of Detailed explanation of jQuery.ajaxComplete() function usage. For more information, please follow other related articles on the PHP Chinese website!