jQuery - AJAX load() 方法
jQuery load() 方法
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>php中文网(php.cn)</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 物件
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>
完整實例：
先建立一個text.html檔案：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div class="comment"> 已有评论： </div> <div class="comment"> <h6>张三：</h6> <p class="para">沙发。</p> </div> <div class="comment"> <h6>李四：</h6> <p class="para">板凳。</p> </div> <div class="comment"> <h6>王五：</h6> <p class="para">地板。</p> </div> </body> </html>
在建立另一個HTML檔案（名稱可以隨意取）寫入jQuery AJAX load() 方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#send").click(function(){
$("#resText").load("text.html"); //引入text.html文件。
});
});
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div id="resText"></div>
</body>
</html>######## 
