jQuery - AJAX load()-Methode

jQuery load()-Methode

Die jQuery load()-Methode ist eine einfache, aber leistungsstarke AJAX-Methode.

Die Methode load() lädt Daten vom Server und fügt die zurückgegebenen Daten in das ausgewählte Element ein.

Syntax:

$(selector).load(URL,data,callback);

ErforderlichURLDer Parameter gibt die URL an, die Sie laden möchten.

OptionaldataDer Parameter gibt die Menge der Query-String-Schlüssel/Wert-Paare an, die mit der Anfrage gesendet werden sollen.

OptionalcallbackDer Parameter ist der Name der Funktion, die ausgeführt wird, nachdem die Methode load() abgeschlossen ist.

Dies ist der Inhalt der Beispieldatei ("demo_test.txt"):

<h2>jQuery AJAX ist ein wirklich großartiges Feature!</h2> <p id="p1">Dies ist etwas Text in einem Absatz.</p>

Das folgende Beispiel lädt den Inhalt der Datei "demo_test.txt" in das angegebene <div>-Element:

Beispiel

$("#div1").load("demo_test.txt");

Selbst ausprobieren »

Sie können dem URL-Parameter auch einen jQuery-Selektor hinzufügen.

Das folgende Beispiel lädt den Inhalt des Elements mit id="p1" in der Datei "demo_test.txt" in das angegebene <div>-Element:

Beispiel

$("#div1").load("demo_test.txt #p1");

Selbst ausprobieren »

Der optionale Callback-Parameter gibt die 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 Ergebnisinhalt, wenn der Aufruf erfolgreich ist
  • statusTXT- Enthält den Status des Aufrufs
  • xhr- Enthält das XMLHttpRequest-Objekt

Das folgende Beispiel zeigt ein Alert-Fenster an, nachdem die load()-Methode abgeschlossen ist. Wenn die load()-Methode erfolgreich ist, zeigt es "Externer Inhalt erfolgreich geladen!" an, und wenn sie fehlschlägt, zeigt es eine Fehlermeldung an:

Beispiel

$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("Externer Inhalt erfolgreich geladen!"); if(statusTxt=="error") alert("Fehler: "+xhr.status+": "+xhr.statusText); }); });

Selbst ausprobieren »
Weitere Erweiterungen