jQuery ajax - lataa() -menetelmä
Esimerkki
Muuta div-elementin tekstiä AJAX-pyynnön avulla:
$("nappi").click(function(){
$("div").lataa('demo_ajax_load.txt');
});
määrittely ja käyttö
lataa() -menetelmä lataa tietoja palvelimelta AJAX-pyynnön kautta ja sijoittaa palautetut tiedot määritettyyn elementtiin.
Huomautus:on myös olemassa nimi lataa jQuery:n tapahtumamenetelmä. Kumpi kutsutaan, riippuu parametreista.
syntaksi
lataa(url,data,funktion(response,status,xhr))
| parametrit | kuvaus |
|---|---|
| url | Määrittää, mihin URL-osoitteeseen pyyntö lähetetään. |
| data | Valinnainen. Määrittää tiedot, jotka lähetetään palvelimelle pyynnön mukana. |
| function(response,status,xhr) |
Valinnainen. Määrittää funktio, joka suoritetaan pyynnön valmistuttua. Lisäparametrit:
|
Yksityiskohtainen selitys
Tämä menetelmä on yksinkertaisin tapa hakea tietoja palvelimelta. Se on lähes sama kuin $.get(url, data, success), mutta se ei ole globaali funktio ja sillä on implisiittinen paluutoiminto. Kun havaitaan onnistunut vastaus (esim., kun textStatus on "success" tai "notmodified"), .load() asettaa matchattavan elementin HTML-sisällön palautetuksi dataksi. Tämä tarkoittaa, että tämän menetelmän suurin osa käyttöä on erittäin yksinkertaista:
$("#result").load("ajax/test.html");
Jos tarjotaan paluutoiminto, tämä toiminto suoritetaan post-processingin jälkeen:
$("#result").load("ajax/test.html", function() {
alert("Lataus suoritettiin.");
});
Yllä olevissa esimerkeissä .load() -menetelmää ei suoriteta, jos nykyinen dokumentti ei sisällä "result"-ID:tä.
Jos tarjottu tieto on objekti, käytetään POST-metodia; muussa tapauksessa GET-metodia.
Lataa sivun osa
.load() -menetelmä, eriäen $.get() -menetelmästä, mahdollistaa määrittämisen, että tietty osa etädokumentista lisätään. Tämä toteutetaan erityisellä syntaxilla url-parametrin avulla. Jos merkkijonossa on yksi tai useita välilyöntejä, merkkijono, joka on ensimmäisen välilyönnin jälkeen, määrittää ladattavan sisällön jQuery-valitsimen.
Voimme muokata yllä olevaa esimerkkiä, jotta voimme käyttää saadun dokumentin tiettyä osaa:
$("#result").load("ajax/test.html #container");
Jos suoritetaan tämä menetelmä, palautetaan ajax/test.html:n sisältö, mutta sitten jQuery analysoi palautetun dokumentin löytääkseen elementin, jolla on säiliö ID. Tämä elementti, mukaan lukien sen sisältö, lisätään elementtiin, jolla on tulosten ID, ja palautetun dokumentin muu osa heitetään pois.
jQuery käyttää selaimen .innerHTML-ominaisuutta tulkitaan haettu dokumentti ja lisätään se nykyiseen dokumenttiin. Tässä prosessissa selain suodattaa usein elementtejä, kuten <html>, <title> tai <head>-elementit. Tämän seurauksena .load() -menetelmällä haetut elementit eivät välttämättä ole täysin samanlaisia kuin selaimen suoraan haetut dokumentit.
Huomautus:Selaimen turvallisuusrajoitusten vuoksi useimmat "Ajax"-pyynnöt noudattavat samaa alkuperää -strategiaa; pyynnöt eivät onnistu hankkimaan tietoja eri verkkotunnuksista, aliverkkotunnuksista tai protokollista.
Lisää esimerkkejä
Esimerkki 1
Lataa feeds.html-tiedoston sisältö:
$("#feeds").load("feeds.html");
Esimerkki 2
Samankaltainen esimerkki, mutta lähettää lisäparametreja POST-muodossa ja näyttää viestin onnistumisen yhteydessä:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Viimeiset 25 syötteessä olevaa merkintää on ladattu");
});
Esimerkki 3
Lataa artikkelin sivupalkin navigointiosa luetteloon:
HTML-koodi:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery-koodi:
$("#links").load("/Main_Page #p-Getting-Started li");
Lisää TIY-esimerkkejä
- Luo AJAX-pyynnön ja lähetä tietoja kyseisen pyynnön kautta
- Miten lähettää tietoja AJAX-pyynnön avulla data-parametrien avulla. (Tämä esimerkki selitetään AJAX-opetuksessa.)
- Luo AJAX-pyynnön ja lähetä tietoja kyseisen pyynnön kautta
- Miten käsitellä AJAX-pyynnön palauttamat tietojen tulokset function-parametrien avulla.
- Luo AJAX-pyynnön, joka sisältää virheen
- Miten käsitellä AJAX-pyynnön virheitä function-parametrien avulla (käyttäen XMLHttpRequest-parametreja).
