Detaillierte Erläuterung der Verwendung der jQuery.ajaxComplete()-Funktion

Die Funktion

ajaxComplete() wird verwendet, um die Rückruffunktion so festzulegen, dass sie ausgeführt wird, wenn die AJAX-Anfrage abgeschlossen ist (ob erfolgreich oder fehlgeschlagen).

Dies ist eine globale AJAX-Ereignisfunktion, die verwendet wird, um die Ereignisverarbeitungsfunktion an das ajaxComplete-Ereignis aller AJAX-Anfragen zu binden. Wenn die AJAX-Anfrage abgeschlossen ist (ob erfolgreich oder fehlgeschlagen), wird das ajaxComplete-Ereignis ausgelöst und der gebundene Ereignishandler wird ausgeführt.

Diese Funktion muss für die jQuery-Objektinstanz aufgerufen werden und ajaxComplete() bindet eine Handlerfunktion an das ajaxComplete-Ereignis jedes übereinstimmenden Elements. Wenn die AJAX-Anfrage abgeschlossen ist, werden die Verarbeitungsfunktionen für alle übereinstimmenden Elemente ausgelöst und ausgeführt. Dies innerhalb des Ereignishandlers zeigt auf das aktuelle DOM-Element.

Sie können diese Funktion mehrmals für dasselbe Element aufrufen, um mehrere Ereignishandler zu binden. Wenn das ajaxComplete-Ereignis ausgelöst wird, führt jQuery die gebundenen Ereignisverarbeitungsfunktionen in der Reihenfolge der Bindung aus.

Ab jQuery 1.8 kann diese Funktion nur Handler an das ajaxComplete-Ereignis des document-Objekts binden. Ereignishandler, die an andere Elemente gebunden sind, funktionieren nicht.

Wenn Sie den Optionsparameter global in jQuery.ajax() oder jQuery.ajaxSetup() auf false setzen, können Sie verhindern, dass die AJAX-Anfrage globale AJAX-Ereignisse auslöst.

Diese Funktion gehört zum jQuery-Objekt (Instanz).

Syntax

Diese Funktion ist neu in jQuery 1.0.

jQueryObject.ajaxComplete( handler)

Parameter

Parameterbeschreibung

handler Funktionstyp muss bei diesem Ereignis ausgeführt werden Die Ereignisbehandlungsfunktion wird ausgelöst.

Der Callback-Funktionshandler verfügt über drei Parameter: Einer ist das Event-Objekt, das das aktuelle Ereignis darstellt, der andere ist das jqXHR-Objekt, das die aktuelle AJAX-Anfrage sendet, und der dritte sind alle für diese AJAX-Anfrage festgelegten Parameteroptionen ( Objekt einschließlich Standardparameteroptionen, die nicht angegeben werden müssen).

Das jqXHR-Objekt ist ein XMLHttpRequest-ähnliches Objekt, das von jQuery gekapselt wird.

Rückgabewert

ajaxComplete()Der Rückgabewert der Funktion ist vom Typ jQuery und gibt das aktuelle jQuery-Objekt selbst zurück.

Beispiel und Beschreibung

Bitte beachten Sie den folgenden HTML-Beispielcode:

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

Im Folgenden finden Sie den jQuery-Beispielcode für die Funktion ajaxComplete() zur Veranschaulichung ajaxComplete()-Funktion Spezifische Verwendung:

Bitte führen Sie den folgenden Code basierend auf jQuery-Versionen vor 1.8 aus (bitte beachten Sie, dass die Ereignisverarbeitungsfunktion durch ajaxComplete() und die Rückruffunktion durch die vollständige Option von $.ajax festgelegt wird (), ihre Parameter sind unterschiedlich).

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

Wenn die aktuelle jQuery Version 1.8 und höher ist, öffnet der obige jQuery-Code das Dialogfeld insgesamt nur einmal. Denn ab jQuery 1.8 muss die Handlerfunktion des ajaxComplete-Ereignisses an das Dokumentobjekt gebunden werden, damit sie wirksam wird.

Daher sollten wir, unabhängig von der aktuellen Version von jQuery, die Handlerfunktion des ajaxComplete-Ereignisses an das Dokumentobjekt binden, wenn keine besonderen Anforderungen bestehen.

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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der jQuery.ajaxComplete()-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!