Detaillierte Erläuterung der Verwendung von jQuery Ajax (Load, Post, Get, Ajax)

Dieser Artikel enthält hauptsächlich eine detaillierte Diskussion über die Verwendung von jQuery Ajax (Laden, Posten, Abrufen, Ajax). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Heute habe ich einige Internetnutzer in der Gruppe gesehen, die nach den Unterschieden zwischen Jquery und Ajax gefragt haben (Laden, Posten, Abrufen, Ajax). Jetzt habe ich einen Artikel zusammengestellt, in der Hoffnung, den Internetnutzern zu helfen einige einfache Methoden.

Diese Methoden sind alle Methoden, die jQuery.ajax() kapseln, um unsere Verwendung zu erleichtern. Wenn Sie mit komplexer Logik umgehen möchten, müssen Sie natürlich weiterhin jQuery .ajax() verwenden (dies wird später besprochen).

url (String): Die URL-Adresse der angeforderten HTML-Seite.

Daten (Karte): (optionaler Parameter) Schlüssel-/Wertdaten, die an den Server gesendet werden.

Rückruf (Callback): (optionaler Parameter) Die Rückruffunktion, wenn die Anfrage abgeschlossen ist (muss nicht erfolgreich sein).

Diese Methode verwendet standardmäßig die GET-Methode. Wenn für den Parameter [data] Daten übergeben werden, werden diese automatisch in die POST-Methode konvertiert. In jQuery 1.2 können Sie den Selektor

angeben, um das geladene HTML-Dokument zu filtern, und nur der gefilterte HTML-Code wird in das DOM eingefügt. Die Syntax ist wie „url #some > selector“.

Mit dieser Methode können einige HTML-Dateien, z. B. Formulare, problemlos dynamisch geladen werden.

Beispielcode:

Hinweis: Ich weiß nicht, warum das Schreiben eines absoluten Pfads zu einer URL unter FF zu einem Fehler führt. Wenn Sie es wissen, lassen Sie es mich bitte wissen. Die folgenden Beispiele für get() und post() verwenden absolute Pfade, sodass Sie unter FF eine Fehlermeldung erhalten und die zurückgegebenen Ergebnisse nicht sehen. Es gibt auch get()- und post()-Beispiele, die als domänenübergreifend bezeichnet werden. Ich habe festgestellt, dass es nach dem Hochladen keine Möglichkeit gab, die Ergebnisse abzurufen, also habe ich die Schaltfläche „Ausführen“ entfernt.

$(".ajax.load").load("http:
//www.jb51.net",function (responseText, textStatus, XMLHttpRequest)
{this;//在这里this指向的是当前的DOM对象，
即$(".ajax.load")[0]
 //alert(responseText);
//请求返回的内容
/alert(textStatus);
//请求状态：success，error
//alert(XMLHttpRequest);
//XMLHttpRequest对象});

2. jQuery.get( url, [data], [callback] ): Verwenden Sie die GET-Methode, um asynchrone Anfragen zu stellen

Parameter:

url (String): Senden Angeforderte URL-Adresse.

Daten (Karte): (Optional) Die an den Server zu sendenden Daten, ausgedrückt in Form von Schlüssel/Wert-Paaren, werden als QueryString an die Anforderungs-URL angehängt.

Rückruf (Funktion): (Optional) Rückruffunktion, wenn das Laden erfolgreich ist (diese Methode wird nur aufgerufen, wenn der Rückgabestatus der Antwort erfolgreich ist).

Dies ist eine einfache GET-Anfragefunktion zum Ersetzen des komplexen $.ajax. Die Callback-Funktion kann aufgerufen werden, wenn die Anfrage erfolgreich ist. Wenn Sie eine Funktion im Fehlerfall ausführen müssen, verwenden Sie $.ajax.

Beispielcode:

Natürlich kann der Fehler hier nicht abgefangen werden, da die Rückruffunktion bei einem Fehler überhaupt nicht ausgeführt wird //alert(this); });

$.get("./Ajax.aspx", {Action:"get",Name:"lulu"},
function (data, textStatus)
{//返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等.this; 
// 在这里this指向的是Ajax请求的选项配置信息，请参考下图alert(data);
//alert(textStatus);
//请求状态：success，error等等。

Klicken Sie, um die Anfrage zu senden:

Dies in der Rückruffunktion jQuery.get() verweist auf die Optionskonfigurationsinformationen der Ajax-Anfrage:

3. jQuery.post( url, [data] , [callback], [type] ): Verwenden Sie die POST-Methode, um asynchrone Anfragen zu stellen

Parameter:

url (String): URL-Adresse zum Senden der Anfrage.

Daten (Map): (optional) Die an den Server zu sendenden Daten, ausgedrückt in Form von Schlüssel/Wert-Paaren.

Rückruf (Funktion): (Optional) Rückruffunktion, wenn das Laden erfolgreich ist (diese Methode wird nur aufgerufen, wenn der Rückgabestatus der Antwort erfolgreich ist).

Typ (String): (Optional) Die offizielle Beschreibung lautet: Typ der zu sendenden Daten. Tatsächlich sollte es der vom Client angeforderte Typ sein (JSON, XML usw.)

Dies ist eine einfache POST-Anfragefunktion, um die komplexe $.ajax zu ersetzen. Die Callback-Funktion kann aufgerufen werden, wenn die Anfrage erfolgreich ist. Wenn Sie eine Funktion im Fehlerfall ausführen müssen, verwenden Sie $.ajax.

Beispielcode:

Ajax.aspx:

jQuery-Code:

Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");

Zum Senden klicken:

$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus)
{// data 可以是 xmlDoc, jsonObj, html, text, 等等.//this; 
// 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的thisalert(data.result);}, "json");

Stellen Sie hier das Anforderungsformat auf „json“ ein:

Wenn Sie das Anforderungsformat auf „json“ festlegen und den von der Antwort zurückgegebenen ContentType nicht auf Folgendes setzen: Response.ContentType = „application/json“ dann Sie können die zurückgegebenen Daten nicht erfassen.

Beachten Sie, dass warning(data.result); da der Accept-Header auf „json“ gesetzt ist, die hier zurückgegebenen Daten ein Objekt sind und es nicht erforderlich ist, eval() zu verwenden, um sie in ein Objekt zu konvertieren .

4. jQuery.getScript( url, [callback] ): Anforderung zum Laden und Ausführen einer JavaScript-Datei über die GET-Methode.

Parameter

url (String): Die Adresse der zu ladenden JS-Datei.

Rückruf (Funktion): (Optional) Rückruffunktion nach erfolgreichem Laden.

Vor jQuery 1.2 konnte getScript nur JS-Dateien in derselben Domäne aufrufen. In 1.2 können Sie JavaScript-Dateien domänenübergreifend aufrufen. Hinweis: Safari 2 oder früher kann Skripte nicht synchron im globalen Bereich ausführen. Wenn Sie ein Skript über getScript hinzufügen, fügen Sie bitte eine Verzögerungsfunktion hinzu.

Diese Methode kann beispielsweise verwendet werden, um die vom Editor benötigten JS-Dateien zu laden, wenn nur der Editor focus() ist. Hier sind einige Beispielcodes:

Test laden und ausführen. js.

jQuery-Code:

$.getScript("test.js");

AjaxEvent.js laden und ausführen und nach Erfolg Informationen anzeigen.

jQuery-Code:

$.getScript("AjaxEvent.js", function(){alert("AjaxEvent.js wird geladen und ausgeführt. Klicken Sie dann oben auf die Schaltfläche „Abrufen“ oder „Posten“. Unterschied? ");});

jQuery Ajax Event

Ajax-Anfragen generieren mehrere verschiedene Ereignisse, die wir abonnieren und in denen wir unsere Logik verwalten können. In jQuery gibt es zwei Arten von Ajax-Ereignissen: lokale Ereignisse und globale Ereignisse.

Lokale Ereignisse werden innerhalb der Methode während jeder Ajax-Anfrage definiert, zum Beispiel:

$.ajax({beforeSend: function(){// Handle the beforeSend event},complete : function( ){// Behandeln Sie das vollständige Ereignis}// ...});

Das globale Ereignis wird durch jede Ajax-Anfrage ausgelöst. Es wird an alle Elemente im DOM gesendet Das Beispiel von getScript() ist das globale Ajax-Ereignis. Globale Ereignisse können wie folgt definiert werden:

$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function( ){$(this).hide();});

oder:

$("#loading").ajaxStart(function(){$(this).show () ;});

Wir können globale Ereignisse in bestimmten Anfragen deaktivieren, legen Sie einfach die globale Option fest:

$.ajax({url: "test.html",global : false, // Globale Ajax-Ereignisse deaktivieren.// ...});

Der obige Artikel beschreibt die Verwendung von jQuery Ajax (Load, Post, Get, Ajax) im Detail, die der Herausgeber mitgeteilt hat Dies ist Ihr gesamter Inhalt. Ich hoffe, er kann Ihnen als Referenz dienen und ich hoffe, dass Sie Script House stärker unterstützen werden.

Verwandte Empfehlungen:

Einfaches Tutorial zur Ajax-Nutzung

Javascript jQuery $.post $.ajax-Nutzung

Super einfache AJAX-Nutzung von jquery_jquery

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von jQuery Ajax (Load, Post, Get, Ajax). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!