jQuery ajax - load() 方法 · W3School jQuery 參考手冊

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