jQuery - AJAX load() Methode
jQuery load() Methode
De jQuery- load()methode is een eenvoudige, maar krachtige AJAX-methode.
De load()methode laadt gegevens van een server en plaatst de geretourneerde gegevens in het geselecteerde element.
Syntaxis:
$(selector).load(URL,data,callback);
De vereiste URL-parameter specificeert de URL die u wilt laden.
De optionele dataparameter specificeert een set sleutel-/waardeparen voor querytekenreeksen die samen met de aanvraag moeten worden verzonden.
De optionele callback-parameter is de naam van een functie die moet worden uitgevoerd nadat de load()methode is voltooid.
Hier is de inhoud van ons voorbeeldbestand: "demo_test.txt":
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
Het volgende voorbeeld laadt de inhoud van het bestand "demo_test.txt" in een specifiek <div>element:
Voorbeeld
$("#div1").load("demo_test.txt");
Het is ook mogelijk om een jQuery-selector toe te voegen aan de URL-parameter.
Het volgende voorbeeld laadt de inhoud van het element met id="p1", in het bestand "demo_test.txt", in een specifiek <div>element:
Voorbeeld
$("#div1").load("demo_test.txt #p1");
De optionele callback-parameter specificeert een callback-functie die moet worden uitgevoerd wanneer de
load()methode is voltooid. De callback-functie kan verschillende parameters hebben:
responseTxt- bevat de resulterende inhoud als de oproep slaagtstatusTxt- bevat de status van de oproepxhr- bevat het XMLHttpRequest-object
In het volgende voorbeeld wordt een waarschuwingsvenster weergegeven nadat de methode load() is voltooid. Als de load()methode is geslaagd, wordt "Externe inhoud succesvol geladen!" weergegeven, en als het mislukt, wordt een foutbericht weergegeven:
Voorbeeld
$("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-referentie
Ga voor een compleet overzicht van alle jQuery AJAX-methoden naar onze jQuery AJAX Reference .