jQuery - AJAX load() method
jQuery load() method
The load() method loads data from the server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies the set of query string key/value pairs sent with the request.
The optional callback parameter is the name of the function executed after the load() method is completed.
This is the content of the sample file ("demo_test.txt"):
<h2>jQuery AJAX 是個(gè)非常棒的功能！</h2> <p id="p1">這是段落的一些文本。</p>
Load the content of the file "demo_test.txt" into the specified <div> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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 修改文本內(nèi)容</h2></div>
<button>獲取外部內(nèi)容</button>
</body>
</html>You can also add jQuery selectors to URL parameters.
The example loads the content of the element with id="p1" in the "demo_test.txt" file into the specified <div> element:
<!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>The optional callback parameter specifies when The callback function to be allowed after the load() method completes. The callback function can set different parameters:
responseTxt - Contains the result content when the call is successful
statusTXT - Contains the status of the call
xhr - Contains the XMLHttpRequest object
The following example will display a prompt box after the load() method is completed. If the load() method has succeeded, "External content loaded successfully!" is displayed, and if it fails, the error message is displayed:
<!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("外部內(nèi)容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div>
<button>獲取外部內(nèi)容</button>
</body>
</html>Complete example:
First create a text.html file:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <div class="comment"> 已有評(píng)論： </div> <div class="comment"> <h6>張三：</h6> <p class="para">沙發(fā)。</p> </div> <div class="comment"> <h6>李四：</h6> <p class="para">板凳。</p> </div> <div class="comment"> <h6>王五：</h6> <p class="para">地板。</p> </div> </body> </html>
Create another Write an HTML file (the name can be arbitrary) into jQuery AJAX load() method:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>
