jQuery load()方法
jQuery load()方法是一个简单但功能强大的AJAX方法。
load()方法从服务器加载数据并将返回的数据放入选定的元素中。
语法:$(selector).load(URL,data,callback);
必需的URL参数指定要加载的URL。
可选的data参数指定要与请求一起发送的一组查询字符串键/值对。
可选的回调参数是load()方法完成后要执行的函数的名称。
以下是我们的示例文件的内容:“demo_test.txt”:
<h2>jQuery和AJAX很有趣!</h2>
<p> id="p1">这是段落中的一些文字。</p>
以下示例将文件“demo_test.txt”的内容加载到特定的<div>元素中:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").load("demo_test.txt");
});
</script>
</head>
尝试一下
也可以在URL参数中添加jQuery选择器。
以下示例将文件“demo_test.txt”中具有id =“p1”的元素的内容加载到特定的<div>元素中:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#div1").load("demo_test.txt #p1");
});
</script>
</head>
尝试一下
可选的callback参数指定在load()方法完成时运行的回调函数。回调函数可以有不同的参数:
- responseTxt 如果调用成功,则包含结果内容
- statusTxt 包含呼叫的状态
- xhr 包含XMLHttpRequest对象
以下示例在load()方法完成后显示警告框。 如果load()方法成功,则显示“外部内容已成功加载!”,如果失败则显示错误消息:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt == "success")
alert("外部内容已成功加载!");
if(statusTxt == "error")
alert("错误: " + xhr.status + ": " + xhr.statusText);
});
});
});
</script>
</head>
尝试一下
有关所有jQuery AJAX方法的完整概述,请转到我们的jQuery AJAX参考手册。