jQuery中的Ajax
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").click(function() {
var url = this.href;
// 加上args参数, 发送的就是post请求, 不加参数发的就是get请求, 注意: 参数的格式是json格式
var args = {"time": new Date()};
$("#content").load(url, args);
return false;
});
});
</script>
<body>
<a href="Hello.txt">Hello</a>
<div id="content"></div>
</body>
测试:
-----------------------------------
响应html格式数据:
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
任何一个html节点都可以直接使用load方法加载ajax, 结果将直接插入到html中
------------------------------------------------
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
// 一. HTML格式的数据
/*
$(function() {
$("a").click(function() {
// 1. 如果只想取h2部分的数据, 写成: var url = this.href + " h2";
// 2. 如果只想取h2中的a部分的数据, 写成: var url = this.href + " h2 a";
var url = this.href;
var args = {"time": new Date()};
// 返回的结果将直接插入到目标节点中
$("#details").load(url, args);
return false;
});
});
*/
// 二. XML格式的数据
/*
$(function() {
$("a").click(function() {
var url = this.href;
var args = {"time": new Date()};
// 把get换成post, 就是post请求
// url: 获取数据的路径
// args: JSON格式
// 回调函数: 当响应结束时, 回调函数被触发, 响应结果在data中
$.get(url, args, function(data) {
// $(data): 用$符号包装成jQuery对象
// $(data).find("name"): 获取name节点
// $(data).find("name").text(): 获取name节点的文本
var name = $(data).find("name").text();
var website = $(data).find("website").text();
var email = $(data).find("email").text();
// empty(): 清空之前的数据, 防止不断追加
// append(String str): 自动解析html
$("#details").empty()
.append("<h2><a href='hello:" + email + "'>" + name + "</a></h2>")
.append("<a href='" + website + "'>" + website + "/</a>");
});
return false;
});
});
*/
// 三. JSON格式的数据
$(function() {
$("a").click(function() {
var url = this.href;
var args = {"time": new Date()};
$.getJSON(url, args, function(data) {
var name = data.person.name;
var website = data.person.website;
var email = data.person.email;
$("#details").empty()
.append("<h2><a href='hello:" + email + "'>" + name + "</a></h2>")
.append("<a href='" + website + "'>" + website + "/</a>");
});
// 或者写成
/*
$.get(url, args, function(data) {
var name = data.person.name;
var website = data.person.website;
var email = data.person.email;
$("#details").empty()
.append("<h2><a href='hello:" + email + "'>" + name + "</a></h2>")
.append("<a href='" + website + "'>" + website + "/</a>");
}, "JSON");
*/
return false;
});
});
</script>
<body>
<h2>People</h2>
<ul>
<!-- 换成不同的数据格式链接 -->
<li><a href="files/andy.js">andy</a></li>
<li><a href="files/peter.js">peter</a></li>
<li><a href="files/tom.js">tom</a></li>
</ul>
<!-- 实现三个超链接的Ajax, 将结果放在下面的区域 -->
<div id="details"></div>
</body>
总结:
浙公网安备 33010602011771号