Die jQuery AJAX load() -Methode

Die jQuery load() -Methode

Die jQuery load() -Methode ist eine einfache aber mächtige AJAX-Methode.

Die Methode load() lädt Daten von einem Server und platziert die zurückgegebenen Daten in das ausgewählte Element.

语法：

$("}}).load(URL,data,callback);

Erforderlich URL Der Parameter legt die URL fest, die Sie laden möchten.

Optional data Der Parameter legt eine Sammlung von Schlüssel/Wert-Paaren fest, die zusammen mit der Anfrage gesendet werden.

Optional callback Der Parameter ist der Name der Funktion, die nach Abschluss der load() Methode ausgeführt wird.

Inhalt des Beispieldatei ("demo_test.txt"):

<h2>jQuery und AJAX ist SPASS!!!</h2>
<p id="p1">Dies ist ein Text in einem Absatz.</p>

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

Beispiel

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

Versuchen Sie es selbst

Sie können auch jQuery-Selektoren zu den URL-Parametern hinzufügen.

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

Beispiel

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

Versuchen Sie es selbst

Der optionale callback-Parameter legt fest, welche Callback-Funktion nach Abschluss der load() Methode ausgeführt werden soll. Die Callback-Funktion kann verschiedene Parameter setzen:

  • responseTxt - Enthält den Inhalt, wenn der Aufruf erfolgreich ist
  • statusTXT - Enthält den Aufrufstatus
  • xhr - Enthält das XMLHttpRequest-Objekt

Der folgende Beispiel zeigt eine Meldungsbalken nach Abschluss des load() Methoden. Wenn die load() Methode erfolgreich ist, wird "Externe Inhaltsladung erfolgreich!" 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("Externe Inhaltsladung erfolgreich!");
    if(statusTxt=="error")
      alert("Fehler: "+xhr.status+": "+xhr.statusText);
  });
});

Versuchen Sie es selbst

jQuery AJAX Referenzhandbuch

Für eine vollständige Referenz der AJAX-Methode besuchen Sie bitte unsere jQuery AJAX Referenzhandbuch.