jQuery ajax - load() 方法
實例
使用 AJAX 請求來改變 div 元素的文本:
$("button").click(function(){ $("div").load('demo_ajax_load.txt'); });
定義和用法
load() 方法通過 AJAX 請求從服務(wù)器加載數(shù)據(jù),并把返回的數(shù)據(jù)放置到指定的元素中。
注釋:還存在一個名為 load 的 jQuery 事件方法。調(diào)用哪個,取決于參數(shù)。
語法
load(url,data,function(response,status,xhr))
參數(shù) | 描述 |
---|---|
url | 規(guī)定要將請求發(fā)送到哪個 URL。 |
data | 可選。規(guī)定連同請求發(fā)送到服務(wù)器的數(shù)據(jù)。 |
function(response,status,xhr) |
可選。規(guī)定當(dāng)請求完成時運行的函數(shù)。 額外的參數(shù):
|
詳細說明
該方法是最簡單的從服務(wù)器獲取數(shù)據(jù)的方法。它幾乎與 $.get(url, data, success) 等價,不同的是它不是全局函數(shù),并且它擁有隱式的回調(diào)函數(shù)。當(dāng)偵測到成功的響應(yīng)時(比如,當(dāng) textStatus 為 "success" 或 "notmodified" 時),.load() 將匹配元素的 HTML 內(nèi)容設(shè)置為返回的數(shù)據(jù)。這意味著該方法的大多數(shù)使用會非常簡單:
$("#result").load("ajax/test.html");
如果提供回調(diào)函數(shù),則會在執(zhí)行 post-processing 之后執(zhí)行該函數(shù):
$("#result").load("ajax/test.html", function() { alert("Load was performed."); });
上面的兩個例子中,如果當(dāng)前文檔不包含 "result" ID,則不會執(zhí)行 .load() 方法。
如果提供的數(shù)據(jù)是對象,則使用 POST 方法;否則使用 GET 方法。
加載頁面片段
.load() 方法,與 $.get() 不同,允許我們規(guī)定要插入的遠程文檔的某個部分。這一點是通過 url 參數(shù)的特殊語法實現(xiàn)的。如果該字符串中包含一個或多個空格,緊接第一個空格的字符串則是決定所加載內(nèi)容的 jQuery 選擇器。
我們可以修改上面的例子,這樣就可以使用所獲得文檔的某部分:
$("#result").load("ajax/test.html #container");
如果執(zhí)行該方法,則會取回 ajax/test.html 的內(nèi)容,不過然后,jQuery 會解析被返回的文檔,來查找?guī)в腥萜?ID 的元素。該元素,連同其內(nèi)容,會被插入帶有結(jié)果 ID 的元素中,所取回文檔的其余部分會被丟棄。
jQuery 使用瀏覽器的 .innerHTML 屬性來解析被取回的文檔,并把它插入當(dāng)前文檔。在此過程中,瀏覽器常會從文檔中過濾掉元素,比如 <html>, <title> 或 <head> 元素。結(jié)果是,由 .load() 取回的元素可能與由瀏覽器直接取回的文檔不完全相同。
注釋:由于瀏覽器安全方面的限制,大多數(shù) "Ajax" 請求遵守同源策略;請求無法從不同的域、子域或協(xié)議成功地取回數(shù)據(jù)。
更多實例
例子 1
加載 feeds.html 文件內(nèi)容:
$("#feeds").load("feeds.html");
例子 2
與上面的實例類似,但是以 POST 形式發(fā)送附加參數(shù)并在成功時顯示信息:
$("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); });
例子 3
加載文章側(cè)邊欄導(dǎo)航部分至一個無序列表:
HTML 代碼:
<b>jQuery Links:</b> <ul id="links"></ul>
jQuery 代碼:
$("#links").load("/Main_Page #p-Getting-Started li");
更多 TIY 實例
- 生成 AJAX 請求,并通過該請求發(fā)送數(shù)據(jù)
- 如何使用 data 參數(shù)通過 AJAX 請求來發(fā)送數(shù)據(jù)。(本例在 AJAX 教程中解釋過。)
- 生成 AJAX 請求,并使用回調(diào)函數(shù)
- 如何使用 function 參數(shù)處理來自 AJAX 請求的數(shù)據(jù)結(jié)果。
- 生成帶有錯誤的 AJAX 請求
- 如何使用 function 參數(shù)來處理 AJAX 請求中的錯誤(使用 XMLHttpRequest 參數(shù))。