jQuery - AJAX-load()-Methode
jQuery-load()-Methode
Die jQuery- load()Methode ist eine einfache, aber leistungsstarke AJAX-Methode.
Die load()Methode lädt Daten von einem Server und fügt die zurückgegebenen Daten in das ausgewählte Element ein.
Syntax:
$(selector).load(URL,data,callback);
Der erforderliche URL-Parameter gibt die URL an, die Sie laden möchten.
Der optionale Datenparameter gibt einen Satz von Abfragezeichenfolgen-Schlüssel/Wert-Paaren an, die zusammen mit der Anforderung gesendet werden.
Der optionale Callback-Parameter ist der Name einer Funktion, die nach Abschluss der load()Methode ausgeführt werden soll.
Hier ist der Inhalt unserer Beispieldatei: "demo_test.txt":
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
Das folgende Beispiel lädt den Inhalt der Datei „demo_test.txt“ in ein bestimmtes <div>Element:
Beispiel
$("#div1").load("demo_test.txt");
Es ist auch möglich, dem URL-Parameter einen jQuery-Selektor hinzuzufügen.
Das folgende Beispiel lädt den Inhalt des Elements mit id="p1" in der Datei "demo_test.txt" in ein bestimmtes <div>Element:
Beispiel
$("#div1").load("demo_test.txt #p1");
Der optionale Callback-Parameter gibt eine Callback-Funktion an, die ausgeführt werden soll, wenn die
load()Methode abgeschlossen ist. Die Callback-Funktion kann verschiedene Parameter haben:
responseTxt- enthält den resultierenden Inhalt, wenn der Aufruf erfolgreich iststatusTxt- enthält den Status des Anrufsxhr- enthält das XMLHttpRequest-Objekt
Im folgenden Beispiel wird nach Abschluss der Methode load() ein Warnfeld angezeigt. Wenn die load()Methode erfolgreich war, wird „Externer Inhalt erfolgreich geladen!“ angezeigt, und wenn sie fehlschlägt, wird eine Fehlermeldung angezeigt:
Beispiel
$("button").click(function(){
$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
});
jQuery AJAX-Referenz
Eine vollständige Übersicht aller jQuery AJAX-Methoden finden Sie in unserer jQuery AJAX-Referenz .