De jQuery AJAX load() methode

De jQuery load() methode

De jQuery load() methode is een eenvoudige maar krachtige AJAX-methode.

De load() methode laadt gegevens van de server en plaatst de teruggegeven gegevens in het geselecteerde element.

语法：

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

Verplicht URL De parameter definieert de URL die u wilt laden.

Optioneel data De parameter definieert een verzameling van query string key/value pairs die samen met de aanvraag worden verzonden.

Optioneel callback De parameter is de naam van de functie die wordt uitgevoerd nadat de load() methode is voltooid.

Dit is de inhoud van het voorbeeldbestand ("demo_test.txt"):

<h2>jQuery en AJAX is LEUK!!!</h2>
<p id="p1">Dit is een stuk tekst in een paragraaf.</p>

De volgende voorbeeld laadt de inhoud van het bestand "demo_test.txt" naar het gespecificeerde <div>-element:

Voorbeeld

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

Probeer het zelf

Je kunt ook een jQuery selector toevoegen aan de URL parameter.

De volgende voorbeeld laadt de inhoud van het element met id="p1" in het bestand "demo_test.txt" naar het gespecificeerde <div>-element:

Voorbeeld

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

Probeer het zelf

Optionele callback parameter bepaalt de callback-functie die na het voltooien van de load() methode moet worden uitgevoerd. De callback-functie kan verschillende parameters instellen:

  • responseTxt - Bevat de inhoud van het resultaat bij een succesvolle aanroep
  • statusTXT - Bevat de status van de aanroep
  • xhr - Bevat XMLHttpRequest object

De volgende voorbeeld toont een dialoogvenster na het voltooien van de load() methode. Als de load() methode succesvol is, wordt "Externe inhoud geladen met succes!" weergegeven, en bij falen wordt een foutbericht weergegeven:

Voorbeeld

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Externe inhoud geladen met succes!");
    if(statusTxt=="error")
      alert("Fout: "+xhr.status+": "+xhr.statusText);
  });
});

Probeer het zelf

jQuery AJAX Referenties

Voor een volledige referentie van de AJAX-methoden, bezoek a.u.b. onze jQuery AJAX Referenties.