jQuery ajax - load() Methode
Beispiel
Verwenden Sie AJAX-Anfragen, um den Text des div-Elements zu ändern:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Definition und Verwendung
Die load() Methode lädt Daten über AJAX-Anfragen vom Server und platziert die zurückgegebenen Daten in das angegebene Element.
Anmerkung:Es gibt auch eine Methode namens load von jQuery EreignisMethod. Welche aufgerufen wird, hängt von den Parametern ab.
Syntax
load(url,data,function(response,status,xhr))
| Parameter | Beschreibung |
|---|---|
| url | Bestimmt, an welche URL die Anfrage gesendet werden soll. |
| data | Optional. Daten, die zusammen mit der Anfrage an den Server gesendet werden. |
| function(response,status,xhr) |
Optional. Eine Funktion, die beim Abschluss der Anfrage ausgeführt wird. Zusätzliche Parameter:
|
Detaillierte Erklärung
Dies ist die einfachste Methode, um Daten vom Server zu erhalten. Sie ist fast gleichwertig mit $.get(url, data, success), der Unterschied ist, dass es keine globale Funktion ist und eine implizite Callback-Funktion hat. Wenn eine erfolgreiche Antwort erkannt wird (z.B. wenn textStatus "success" oder "notmodified" ist), setzt .load() den HTML-Inhalt des Elements auf die zurückgegebenen Daten. Dies bedeutet, dass die meisten Anwendungen dieses Verfahrens sehr einfach sind:
$("#result").load("ajax/test.html");
Wenn eine Callback-Funktion bereitgestellt wird, wird diese Funktion nach dem Abschluss der Nachverarbeitung ausgeführt:
$("#result").load("ajax/test.html", function() {
alert("Load wurde ausgeführt.");
});
In den beiden obigen Beispielen wird die .load() -Methode nicht ausgeführt, wenn das aktuelle Dokument nicht den "result" -ID enthält.
Wenn die übergebenen Daten ein Objekt sind, wird das POST-Verfahren verwendet; andernfalls wird das GET-Verfahren verwendet.
Laden Sie Seitenfragment
Die .load() -Methode, im Gegensatz zu $.get(), ermöglicht es uns, einen Teil des remote Dokuments zu spezifizieren. Dies wird durch eine spezielle Syntax des url-Parameters erreicht. Wenn die Zeichenkette eine oder mehrere Leerzeichen enthält, ist die Zeichenkette, die direkt nach dem ersten Leerzeichen folgt, der jQuery-Selektor, der das zu ladende Inhalt bestimmt.
Wir können den obigen Beispiel ändern, so dass wir einen Teil des erhaltenen Dokuments verwenden können:
$("#result").load("ajax/test.html #container");
Wenn diese Methode ausgeführt wird, wird der Inhalt von ajax/test.html zurückgegeben, aber dann parset jQuery den zurückgegebenen Dokument, um nach Elementen mit dem Container-ID zu suchen. Dieses Element zusammen mit seinem Inhalt wird in das Element mit dem Ergebnis-ID eingefügt, der Rest des zurückgegebenen Dokuments wird verworfen.
jQuery verwendet das .innerHTML-Attribut des Browsers, um die zurückgegebenen Dokumente zu analysieren und sie in das aktuelle Dokument einzufügen. Während dieses Prozesses filtert der Browser häufig Elemente aus dem Dokument heraus, wie z.B. <html>, <title> oder <head>-Elemente. Das Ergebnis ist, dass die Elemente, die durch .load() zurückgegeben werden, möglicherweise nicht vollständig mit dem Dokument übereinstimmen, das direkt vom Browser abgerufen wird.
Anmerkung:Aufgrund der Sicherheitsbeschränkungen des Browsers folgen die meisten "Ajax"-Anfragen der Same-Origin-Strategie; Anfragen können nicht erfolgreich Daten von verschiedenen Domains, Subdomains oder Protokollen abrufen.
Mehr Beispiele
Beispiel 1
Laden Sie den Inhalt der Datei feeds.html:
$("#feeds").load("feeds.html");
Beispiel 2
Wie im obigen Beispiel, aber zusätzliche Parameter im POST-Format senden und eine Nachricht bei Erfolg anzeigen:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Die letzten 25 Einträge im Feed wurden geladen");
});
Beispiel 3
Laden Sie den Navigationsbereich der Artikelseite in eine unsortierte Liste:
HTML-Code:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery-Code:
$("#links").load("/Main_Page #p-Getting-Started li");
Mehr TIY-Beispiele
- Erstellung einer AJAX-Anfrage und Senden von Daten über diese Anfrage
- Wie man Daten mit AJAX-Anfragen sendet, indem der data-Parameter verwendet wird. (Dies wird im AJAX-Tutorial erläutert.)
- Erstellung einer AJAX-Anfrage und Verwendung eines Callback-Funktion
- Wie man Datenresultate aus AJAX-Anfragen mit dem function-Parameter verarbeitet.
- Erstellung einer AJAX-Anfrage mit Fehlern
- Wie man Fehler in AJAX-Anfragen (verwendet XMLHttpRequest-Parameter) mit dem function-Parameter behandelt.
