jQuery ajax - load() metod
Exempel
Använd AJAX-forespårgningar för att ändra texten i div-elementet:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
Definition och användning
load() metoden laddar data från servern via AJAX-forespårgningar och lägger tillbaka de återkommande data till den angivna elementen.
Kommentar:finns det också en metod som heter load jQuery händelsemetod. Vilken som ska anropas beror på parametrarna.
syntaks
load(url,data,function(response,status,xhr))
| parametrar | beskrivning |
|---|---|
| url | Anger vilken URL som förfrågan ska skickas till. |
| data | Valfritt. Anger data som skickas till servern tillsammans med förfrågan. |
| function(response,status,xhr) |
Valfritt. Anger vilken funktion som ska köras när förfrågan är klar. Ytterligare parametrar:
|
Detaljerad förklaring
Denna metod är den enklaste metoden att hämta data från servern. Den är nästan lika med $.get(url, data, success), men den är inte en global funktion och har en implicit callback-funktion. När en framgångsrik respons upptäcks (t.ex. när textStatus är "success" eller "notmodified"), sätts HTML-innehållet för elementet att matcha de återkommande data. Detta innebär att de flesta användningarna av denna metod kommer att vara mycket enkla:
$("#result").load("ajax/test.html");
Om en callback-funktion tillhandahålls, kommer denna funktion att köras efter post-processing:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
I de två tidigare exemplen kommer .load() metoden inte att utföras om den aktuella dokumentet inte innehåller "result" ID.
Om de tillhandahållna data är ett objekt, används POST-metoden; annars används GET-metoden.
Ladda sidostücke
.load() metoden, annorlunda än $.get(), tillåter oss att specificera en del av den fjärrdokument som ska infogas. Detta genomförs genom en specialgrammatik för url-parametern. Om denna sträng innehåller en eller flera blanksteg, är strängen som följer det första blanksteget den jQuery-väljare som bestämmer det innehåll som laddas in.
Vi kan modifiera det ovanstående exemplet så att vi kan använda en del av det erhållna dokumentet:
$("#result").load("ajax/test.html #container");
Om metoden körs, kommer innehållet från ajax/test.html att hämtas tillbaka, men sedan kommer jQuery att analysera den återkommande dokumentet för att hitta element med behållare-ID. Detta element, tillsammans med dess innehåll, kommer att infogas i elementet med resultat-ID, resten av den hämtade dokumenten kommer att kastas bort.
jQuery använder webbläsarens .innerHTML-attribut för att tolka det hämtade dokumentet och lägga till det i det aktuella dokumentet. Under detta process kan webbläsaren filtrera bort element, såsom <html>, <title> eller <head>-element. Som ett resultat kan elementen som hämtas med .load() inte vara helt identiska med dokumentet som hämtas direkt av webbläsaren.
Kommentar:På grund av säkerhetsbegränsningar i webbläsare, följer de flesta "Ajax"-forespåringar samma källa-strategi; förfrågningar kan inte lyckas hämta data från olika domäner, underdomäner eller protokoll.
Mer exempel
Exempel 1
Ladda innehållet i filen feeds.html:
$("#feeds").load("feeds.html");
Exempel 2
Liknande som ovan, men skicka extra parametrar i POST-format och visa information vid framgång:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("De senaste 25 inläggen i flödet har laddats");
});
Exempel 3
Ladda navigeringsdelen av artikeln till en icke-punktlistor:
HTML-kod:
<b>jQuery Länkar:</b> <ul id="links"></ul>
jQuery-kod:
$("#links").load("/Main_Page #p-Getting-Started li");
Mer TIY-exempel
- Skapa en AJAX-forespåring och skicka data via denna försök
- Hur man använder data-argument för att skicka data via AJAX-forespåringar. (Detta exempel förklaras i AJAX-utbildningen.)
- Skapa en AJAX-forespåring och använd en callback-funktion
- Hur man använder function-argument för att hantera dataresultat från AJAX-forespåringar.
- Skapa en AJAX-forespåring med fel
- Hur man använder function-argument för att hantera fel i AJAX-forespåringar (använd XMLHttpRequest-argument).
