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 是个非常棒的功能！</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中文网(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>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("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>
</body>
</html>
Complete example:
First create a text.html file:
<!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>
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中文网(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>
Next Section