jQuery load() 方法


jQuery - AJAX load() 方法

#jQuery load() 方法

jQuery load() 方法是簡單但強大的AJAX 方法。

load() 方法從伺服器載入數據，並把傳回的資料放入被選元素中。

語法:

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

必需的 URL 參數規定您希望載入的URL 。

可選的 data 參數規定與請求一同傳送的查詢字串鍵/值對集合。

可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

這是範例檔案（"demo_test.txt"）的內容：

<h2>jQuery AJAX 是個非常棒的功能！ </h2>

<p id="p1">這是段落的一些文本。 </p>

下面的範例會把檔案"demo_test.txt" 的內容載入到指定的<div> 元素中：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("#div1").load("/try/ajax/demo_test.txt");
	});
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>

執行實例»

點擊"執行實例" 按鈕查看線上實例

也可以把jQuery 選擇器加入到URL參數。

下面的範例把"demo_test.txt" 檔案中id="p1" 的元素的內容，載入到指定的<div> 元素中：

##實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>

</body>
</html>

運行實例»點擊"運行實例" 按鈕查看在線實例

可選的callback 參數規定當load( ) 方法完成後所要允許的回呼函數。回呼函數可以設定不同的參數：

responseTxt - 包含呼叫成功時的結果內容statusTXT - 包含呼叫的狀態xhr - 包含XMLHttpRequest 物件

#下面的範例會在load() 方法完成後顯示一個提示框。如果load() 方法已成功，則顯示"外部內容載入成功！"，而如果失敗，則顯示錯誤訊息：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>

運行實例»點擊"運行實例"按鈕查看線上實例


#