本文執行個體講述了jQuery中ajax的load()方法用法。分享給大家供大家參考。具體分析如下:
此函數jQuery中簡單而功能強大的ajax方法。
它可以從伺服器載入內容,然後寫入匹配元素。
文法結構:
複製代碼 代碼如下:
$(selector).load(URL,data,callback);
參數解析:
1.selector:一個選取器,可以將內容載入到此選取器匹配的元素中。
2.URL:必須,需要載入的一個url地址。
3.data:可選,與請求一同發送的查詢字串鍵/值對集合。
4.callback:可選,load()函數執行完畢後要執行的函數,也即是一個回呼函數。
代碼執行個體:
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>雲棲社區</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bt").click(function(){
$("#thediv").load("mytest/demo/antzone.txt");
})
})
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" value="查看效果" id="bt"/>
</body>
</html>
以上代碼實現了我們的要求,可以將文字檔中的內容寫入div元素中。
callback回呼函數:
回呼函數可以具有三個參數,下面介紹一下三個參數的作用:
1.responseTxt:包含調用成功時的結果內容。
2.statusTXT:包含調用的狀態。
3.xhr:XMLHttpRequest對象。
代碼執行個體:
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>雲棲社區</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bt").click(function(){
$("#thediv").load("antzone.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success"){
alert("內容載入成功!");
}
if(statusTxt=="error"){
alert("錯誤:"+xhr.status+":"+xhr.statusText);
}
});
});
})
</script>
</head>
<body>
<div id="thediv"></div>
<input type="button" value="查看效果" id="bt"/>
</body>
</html>
以上代碼實現可以彈出錯誤提示,因為路徑不正確,找不到檔案。
希望本文所述對大家的jQuery程式設計有所協助。