jQuery ajax - load() 方法
实例
使用 AJAX 请求来改变 div 元素的文本：
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
定义和用法
load() 方法通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。
Paliwanag:还存在一个名为 load 的 jQuery 事件方法。调用哪个，取决于参数。
语法
load(url,data,function(response,status,xhr))
| 参数 | 描述 |
|---|---|
| url | Tukuyin ang URL kung saan ay ipapadala ang kahilingan. |
| data | Opisyal. Tukuyin ang datos na dapat ipapadala sa server kasama ang kahilingan. |
| function(response,status,xhr) |
Opisyal. Tukuyin ang function na dapat magpapatuloy kapag nakumpleto ang kahilingan. Higit pang mga parameter:
|
Detalyadong paglalarawan
Ang paraan na ito ang pinakasimpleng paraan para kumuha ng datos mula sa server. Halos katumbas ito ng $.get(url, data, success), ngunit hindi ito isang pangkalahatang function, at mayroon ito ng tahimik na callback function. Kapag napag-aralan ang matagumpay na tugon (katulad ng kapag ang textStatus ay "success" o "notmodified"), ang .load() ay magtatalaga sa nilalaman ng naabot na elemento ng HTML na ang naibalik na datos. Ito ay nangangahulugan na ang karamihan sa paggamit ng paraan na ito ay magiging napakasimpleng:
$("#result").load("ajax/test.html");
Kung ibinigay ang callback function, ang function na ito ay magsasagawa pagkatapos ng post-processing:
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
Sa dalawang halimbawa sa itaas, kung ang kasalukuyang dokumento ay walang ID na "result", ang .load() na paraan ay hindi magsasagawa.
Kung ang ibinigay na datos ay isang bagay, gamitin ang paraan POST; kung hindi, gamitin ang GET.
Paglaladag ng bahagi ng pahina
Ang .load() na paraan, kaiba sa $.get(), ay nagbibigay ng kapahintulutan sa amin na tukuyin ang isang bahagi ng malayang dokumento na iilalagay. Ito ay ginagawa sa pamamagitan ng espesyal na syntax ng parameter ng url. Kung ang string na ito ay naglalaman ng isang o ilang espasyo, ang string na sumusunod sa unang espasyo ay ang jQuery selector na nagpahintulot sa ilalagay na nilalaman.
Maaari naming baguhin ang nakaraang halimbawa, upang gamitin ang ilang bahagi ng naipanalang dokumento:
$("#result").load("ajax/test.html #container");
Kung isinasakatuparan ang paraan na ito, ang nilalaman ng ajax/test.html ay mabubuhay na kumuha, ngunit pagkatapos, ang jQuery ay magpapatunay ng naipabalik na dokumento upang hanapin ang elemento na may ID na container. Ang elemento, kasama ang kanyang nilalaman, ay maitatalaga sa elemento na may ID na result, ang ibang bahagi ng naipabalik na dokumento ay mawawala.
Ginagamit ng jQuery ang .innerHTML na katangian ng browser upang pagsusuri ang dokumento na na-nakuhang, at ipasok ito sa kasalukuyang dokumento. Sa prosesong ito, madalas na nililinis ng browser ang mga elemento mula sa dokumento, tulad ng mga <html>, <title> o <head> na elemento. Ang resulta, ang mga elemento na na-nakuhang sa pamamagitan ng .load() ay maaring hindi magkapareho sa dokumento na direktang na-nakuhang ng browser.
Paliwanag:Dahil sa mga limitasyon ng seguridad ng browser, karamihan sa "Ajax" na mga hiling ay sumusunod sa patakaran ng magkakasunod na pinanggagalingan; ang mga hiling ay hindi kayang matagpuan ng magkakaibang domain, subdomain o protocol para matagpuan ang datos.
Higit pang mga halimbawa
Halimbawa 1
I-load ang nilalaman ng file na feeds.html:
$("#feeds").load("feeds.html");
Halimbawa 2
Katulad ng nakaraang halimbawa, ngunit naipadala sa pamamagitan ng POST ang karagdagang parameter at ipakita ang mensahe kapag nagtagumpay:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("Ang huling 25 na entries sa feed ay na-load");
});
Halimbawa 3
I-load ang bahagi ng pagsasalaysay sa isang listahan na walang baryo:
Kodigo ng HTML:
<b>Link ng jQuery:</b> <ul id="links"></ul>
Kodigo ng jQuery:
$("#links").load("/Main_Page #p-Getting-Started li");
Higit pang mga halimbawa ng TIY
- Pagbuo ng hiling ng AJAX at pagpadala ng datos sa pamamagitan ng hiling na ito
- Paano gamitin ang data parameter upang ipadala ng data sa pamamagitan ng hiling ng AJAX (ang halimbawa na ito ay ipinapaliwanag sa tutorial ng AJAX).
- Pagbuo ng hiling ng AJAX at pagpapadala ng datos sa pamamagitan ng hiling na ito
- Paano gamitin ang function parameter upang hawakan ang resulta ng datos mula sa hiling ng AJAX.
- Pagbuo ng hiling ng AJAX na may error
- Paano gamitin ang function parameter upang hawakan ang mga error sa mga hiling ng AJAX (gamit ang mga parameter ng XMLHttpRequest).
