閱讀(143.3k) 書(shū)簽贊(45) 我要糾錯(cuò)

jQuery – AJAX load() 方法

2021-12-14 13:53 更新

jQuery load() 方法

jQuery load() 方法是簡(jiǎn)單但強(qiáng)大的 AJAX 方法。

load() 方法從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。

語(yǔ)法:

$(selector).load(URL,data,callback);

必需的 URL 參數(shù)規(guī)定您希望加載的 URL。

可選的 data 參數(shù)規(guī)定與請(qǐng)求一同發(fā)送的查詢字符串鍵/值對(duì)集合。

可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。

這是示例文件（"demo_test.txt"）的內(nèi)容：

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

下面的例子會(huì)把文件 "demo_test.txt" 的內(nèi)容加載到指定的 <div> 元素中：

實(shí)例

$("#div1").load("demo_test.txt");

嘗試一下 ?

也可以把 jQuery 選擇器添加到 URL 參數(shù)。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容，加載到指定的 <div> 元素中：

實(shí)例

$("#div1").load("demo_test.txt #p1");

嘗試一下 ?

可選的 callback 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)。回調(diào)函數(shù)可以設(shè)置不同的參數(shù)：

responseTxt - 包含調(diào)用成功時(shí)的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對(duì)象

下面的例子會(huì)在 load() 方法完成后顯示一個(gè)提示框。如果 load() 方法已成功，則顯示"外部?jī)?nèi)容加載成功！"，而如果失敗，則顯示錯(cuò)誤消息：

實(shí)例

$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

嘗試一下 ?

提示：在jQuery的load()方法中，無(wú)論AJAX請(qǐng)求是否成功，一旦請(qǐng)求完成（complete）后，回調(diào)函數(shù)（callback）立即被觸發(fā)。

以上內(nèi)容是否對(duì)您有幫助：