jQuery ajax - load() metode
Eksempel
Brug AJAX-anmodninger til at ændre teksten i div-elementet:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Definition og brug
load() metoden henter data fra serveren via AJAX-anmodning og placerer de returnerede data i det angivne element.
Bemærkninger:der findes også en metode kaldet load jQuery begivenhedmetode. Hvilken der skal bruges, afhænger af parametrene.
syntaks
load(url,data,function(response,status,xhr))
| parametre | beskrivelse |
|---|---|
| url | Angiver URL'en, hvor anmodningen skal sendes til. |
| data | Valgfri. Angiver data, der skal sendes sammen med anmodningen til serveren. |
| function(response,status,xhr) |
Valgfri. Angiver funktionen, der skal køres, når anmodningen er fuldført. Yderligere parametre:
|
Detaljeret beskrivelse
Denne metode er den enkleste måde at hente data fra serveren på. Den er næsten ligesom $.get(url, data, success), men forskellen er, at den ikke er en global funktion, og den har en implicit callback-funktion. Når en succesfuld respons detekteres (f.eks., når textStatus er "success" eller "notmodified"), sættes HTML-indholdet for det matchende element til de returnerede data. Dette betyder, at de fleste brug af denne metode vil være meget enkel:
$("#result").load("ajax/test.html");
Hvis en callback-funktion leveres, vil denne funktion blive udført efter post-processing:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
I de to ovenstående eksempler vil .load() metoden ikke blive udført, hvis den aktuelle dokument ikke indeholder "result" ID.
Hvis de leverede data er et objekt, bruges POST metoden; ellers bruges GET metoden.
Indlæsning af sidefragment
.load() metoden, i modsætning til $.get(), tillader os at specificere en del af den eksterne dokument, der skal indsat. Dette opnås gennem en special syntax for url parameteren. Hvis strengen indeholder en eller flere mellemrum, er strengen straks efter det første mellemrum den jQuery selector, der afgør hvilket indhold der skal indlæses.
Vi kan ændre ovenstående eksempel, så vi kan bruge en del af den opnåede dokument:
$("#result").load("ajax/test.html #container");
Hvis denne metode udføres, vil indholdet af ajax/test.html blive hentet tilbage, men derefter vil jQuery analysere den tilbagevendte dokument for at finde elementer med en container-ID. Dette element, sammen med indholdet, vil blive indsat i elementet med result-ID, og den resterende del af den hentede dokument vil blive kastet væk.
jQuery bruger browserens .innerHTML-egenskab til at fortolke det hentede dokument og indsætte det i det aktuelle dokument. Under dette proces filtrerer browseren ofte elementer fra dokumentet, såsom <html>, <title> eller <head>-elementer. Resultatet er, at elementerne, der hentes ved .load(), kan være forskellige fra det dokument, der hentes direkte af browseren.
Bemærkninger:På grund af sikkerhedsbegrænsninger i browseren følger de fleste "Ajax"-forespørgsler med-sproksstrategien; forespørgsler kan ikke succesfuldt hente data fra forskellige domæner, underdomæner eller protokoller.
Flere eksempler
Eksempel 1
Indlæs indholdet af feeds.html-filen:
$("#feeds").load("feeds.html");
Eksempel 2
Lignende som ovenstående eksempel, men sende tilleggsparametre i POST-format og vis information ved succes:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("De sidste 25 poster i feedet er blevet indlæst");
});
Eksempel 3
Indlæs artikel-sidebjælken til en ufuldstændig liste:
HTML kode:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery kode:
$("#links").load("/Main_Page #p-Getting-Started li");
Flere TIY-eksempler
- Generer AJAX-forespørgsler og send data gennem disse forespørgsler
- Sådan sendes data gennem AJAX-forespørgsler ved hjælp af data-parametre. (Dette eksempel er forklaret i AJAX-undervisningen.)
- Generer AJAX-forespørgsler og brug callback-funktioner
- Sådan håndteres dataresultater fra AJAX-forespørgsler ved hjælp af function-parametre.
- Generer AJAX-forespørgsler med fejl
- Sådan håndteres fejl i AJAX-forespørgsler ved hjælp af function-parametre (brug af XMLHttpRequest-parametre).
