jQuery ajax - load() methode

jQuery Ajax Referentiemanual

Voorbeeld

Gebruik AJAX-verzoeken om de tekst van het div-element te wijzigen:

$("button").click(function(){
  $("div").load('demo_ajax_load.txt');
});

Probeer het zelf

Je kunt meer TIY voorbeelden vinden aan het einde van de pagina.

Definitie en gebruik

De load() methode laadt gegevens van de server via een AJAX-verzoek en plaatst de teruggegeven gegevens in het opgegeven element.

Opmerking:Er bestaat ook een genaamd laad van jQuery evenementmethode. Welke je gebruikt, hangt af van de parameter.

syntax

laad(url,data,functie van(response,status,xhr))
parameter omschrijving
url Bepaal de URL waarop de aanvraag moet worden gestuurd.
data Optioneel. Bepaalde gegevens die samen met de aanvraag naar de server worden gestuurd.
function(response,status,xhr)

Optioneel. Bepaalde functie die wordt uitgevoerd wanneer de aanvraag is voltooid.

Extra parameters:

  • response - Bevat de resultaatgegevens van de aanvraag
  • status - Bevat de status van de aanvraag ("success", "notmodified", "error", "timeout" of "parsererror")
  • xhr - Bevat XMLHttpRequest object

Uitleg

Dit is de eenvoudigste manier om gegevens van de server op te halen. Het is bijna equivalent aan $.get(url, data, success), maar het is geen globale functie en heeft een impliciete callback-functie. Wanneer een succesvolle respons wordt gedetecteerd (bijvoorbeeld, wanneer textStatus "success" of "notmodified" is), stelt .load() de HTML-inhoud van het element in op de teruggegeven gegevens. Dit betekent dat de meeste gebruiksen van deze methode zeer eenvoudig zijn:

$("#result").load("ajax/test.html");

Als een callback-functie wordt verstrekt, wordt deze functie uitgevoerd na de post-processing:

$("#result").load("ajax/test.html", function() {
  alert("Load is uitgevoerd.");
});

In de twee voorbeelden hierboven wordt de .load() methode niet uitgevoerd als het huidige document geen "result" ID bevat.

Als de verstrekte gegevens een object zijn, wordt de POST-methode gebruikt; anders wordt de GET-methode gebruikt.

Laad paginafragment

De .load() methode, in tegenstelling tot $.get(), staat ons toe om een deel van het externe document te specificeren dat moet worden ingesluisd. Dit wordt bereikt door een speciale syntaxis voor de url parameter. Als de string een of meerdere spaties bevat, is de string na de eerste spatie de jQuery selector die beslist over de inhoud die wordt geladen.

We kunnen de bovenstaande voorbeeld aanpassen, zodat we een deel van het verkregen document kunnen gebruiken:

$("#result").load("ajax/test.html #container");

Als deze methode wordt uitgevoerd, wordt de inhoud van ajax/test.html opgehaald, maar vervolgens parseert jQuery het teruggegeven document om elementen met de container ID te vinden. Dit element, samen met zijn inhoud, wordt ingesloten in het element met het resultaat ID, en de overige delen van het opgehaalde document worden weggegooid.

jQuery gebruikt de .innerHTML-eigenschap van de browser om de opgehaalde documenten te parsen en deze in het huidige document in te voegen. Tijdens dit proces filtert de browser vaak elementen uit het document, zoals <html>, <title> of <head>-elementen. Als gevolg hiervan kunnen de elementen die door .load() worden opgehaald, niet volledig hetzelfde zijn als de documenten die direct door de browser worden opgehaald.

Opmerking:Vanwege beveiligingsbeperkingen van de browser, voldoen de meeste "Ajax"-verzoeken aan de same-origin policy; verzoeken kunnen geen gegevens ophalen van verschillende domeinen, subdomeinen of protocollen.

Meer voorbeelden

Voorbeeld 1

Laad de inhoud van het bestand feeds.html:

$("#feeds").load("feeds.html");

Voorbeeld 2

Vergelijkbaar met het vorige voorbeeld, maar met extra parameters verzonden via POST-formaat en een bericht weergegeven bij succes:

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("De laatste 25 entries in de feed zijn geladen");
});

Voorbeeld 3

Laad de navigatie van de zijbalk van het artikel in een ongesorteerde lijst:

HTML-code:

<b>jQuery Links:</b>
<ul id="links"></ul>

jQuery-code:

$("#links").load("/Main_Page #p-Getting-Started li");

Meer TIY voorbeelden

Genereer een AJAX-verzoek en verzend gegevens via dat verzoek
Hoe je gegevens kunt verzenden via een AJAX-verzoek met behulp van de data parameter. (Dit voorbeeld is uitgelegd in de AJAX-tutorial.)
Genereer een AJAX-verzoek en gebruik een callback-functie
Hoe je gegevens van het resultaat van een AJAX-verzoek kunt afhandelen met behulp van de function parameter.
Genereer een AJAX-verzoek met fouten
Hoe je fouten in AJAX-verzoeken kunt afhandelen met behulp van de function parameter (gebruik van XMLHttpRequest parameter).

jQuery Ajax Referentiemanual