jQuery-AJAX load()方法
jQuery load()方法是简单但功能强大的AJAX方法
load方法是从服务器上加载数据，并把返回的数据显示在被选择元素中。
语法格式
$(selector).load(url,data,callback)
参数1：url规定希望加载的数据的地址(必需的);
参数2：data规定与请求一同发送的查询字符串键值对的集合(可选的)
参数3：callback规定是load()方法完成后所执行的函数名称(可选的)
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css"></style>
<script src="Css/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#pid").load("Text/demo_AJAX.txt");
});
})
</script>
</head>
<body>
<section>
<h2>使用jQuery AJAX方法修改p元素的内容</h2>
<p id="pid">这是一个段落，此内容会被修改</p>
</section>
<button>点击修改内容</button>
</body>
</html>
demo_AJAX.txt
jQuery AJAX 是一个非常棒的功能。
<p id=p1>这是一个段落</p>
也可以把jQuery选择器添加到url中，下面的例子是把demo_AJAX.txt文件中p id="p1"的内容插入到被选择的元素中。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("#pid").load("Text/demo_AJAX.txt #p1");
})
})
</script>
</head>
<body>
<section>
<h2>使用jQuery AJAX方法修改p元素的内容</h2>
<p id="pid">这是一个段落，此内容会被修改</p>
</section>
<button>点击修改内容</button>
</body>
</html>
可选的callback参数规定load方法运行完成后所调用的回调函数，回调函数可以设置多个参数，如：responseTxt,statusTxt,xhr
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script src="Css/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$("#pid").load("Text/demo_AJAX.txt", function (responseTxt,statusTxt,xhr) {
if (statusTxt == "success") {
alert("数据加载完成")
};
if (statusTxt == "error")
{
alert("error:"+xhr.status+" "+xhr.statusText)
}
});
});
})
</script>
</head>
<body>
<section>
<h2>使用jQuery AJAX方法修改p元素的内容</h2>
<p id="pid">这是一个段落，此内容会被修改</p>
</section>
<button>点击修改内容</button>
</body>
</html>
