jQuery底层实现了XMLHttpRequest对象以及其包含的 open()、send()等方法,使用jQuery框架,可以很方便实现Ajax数据传输。
下面说下jQuery中与Ajax有关的三个方法:load(),get()/post(),getJSON().
由于URL目标文件格式的不同,可以分为三种传输格式类别:HTML、XML、JSON。可以参考上一篇博客: Ajax之三种数据传输格式
而对应的这三种方法分别解析这三种数据格式,根据回调函数中data返回的数据格式,进行不同的选择。其中load()由于没有回调函数,响应数据直接加载,适用于将HTML格式数据直接加载到DOM节点树上。get()/post()有回调函数,其响应数据格式为URL目标文件的源格式,适用于三种传输格式,一般传输格式为世界语XML时使用。getJSON()同样有回调函数,返回的data数据为JSON格式,因此在URL目标文件为JSON格式时适用。
此处只提了主要部分,更详细的说明请参见:jQuery API 中文文档 http://www.jquery123.com/
load(url,args)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
// 使用load方法处理Ajax
$("a").click(function(){
var url = this.href + " h3"; // jQuery筛选器,可以在URL后面加上需要显示的DOM节点,用空格分开。
var args = {"time":new Date()}; //
$("#details").load(url,args); // 带入参数,防止页面缓存的出现。load()方法带入参数,为该节点载入URL指定的结果
return false; // 禁止链接点击跳转
});
});
</script>
</head>
<body>
<div align="center">
<h1>People</h1>
<ul>
<li><a href="files/andy.html">Andy</a></li>
<li><a href="files/richard.html">Richard</a></li>
<li><a href="files/jeremy.html">Jeremy</a></li>
</ul>
<div id="details"></div>
</div>
</body>
</html>
$.get(url,args,function(data){})与$.post(url,args,function(data){})
其中需要说明的是,第三个参数为回调函数,data表示当数据传输成功时,url目标结果的数据格式。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
// $.post(url,args,function(data){
$.get(url,args,function(data){
var name = $(data).find("name").text(); // 返回的data为XML格式,此处用$(data)将其封装为jQuery对象,再从该对象中找子节点的文本值。
var email = $(data).find("email").text();
var website = $(data).find("website").text();
// 将提取出的属性值以特定的格式 添加到指定的DOM树中
// <h2><a href="mailto:[email]">[name]</a></h2>
// <a href="[website]">[website]</a>
$("#details").empty()
.append("<h2><a href='mailto:"+ email +"'>"+ name +"</a></h2>")
.append("<a href='"+ website +"'>"+ website +"</a>");
});
// 返回的data为JSON格式时,同样可以适用
/*
$.get(url,args,function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
// <h2><a href="mailto:[email]">[name]</a></h2>
// <a href="[website]">[website]</a>
$("#details").empty()
.append("<h2><a href='mailto:"+ email +"'>"+ name +"</a></h2>")
.append("<a href='"+ website +"'>"+ website +"</a>");
},"JSON"); // 需指明其get到的数据格式为JSON
*/
return false;
});
})
</script>
</head>
<body>
<div align="center">
<h1>People</h1>
<ul>
<li><a href="files/andy.xml">Andy</a></li>
<li><a href="files/richard.xml">Richard</a></li>
<li><a href="files/jeremy.xml">Jeremy</a></li>
</ul>
<div id="details"></div>
</div>
</body>
</html>
getJSON(url,args,function(data){})
data返回结果为JSON对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
// function:回调函数,当响应结束时,回调函数被触发,响应结果在data中。
$.getJSON(url,args,function(data){ // 此处的data返回结果为JSON对象
var name = data.person.name; // 通过JSON对象直接调用属性值
var email = data.person.email;
var website = data.person.website;
// <h2><a href="mailto:[email]">[name]</a></h2>
// <a href="[website]">[website]</a>
$("#details").empty()
.append("<h2><a href='mailto:"+ email +"'>"+ name +"</a></h2>")
.append("<a href='"+ website +"'>"+ website +"</a>");
});
return false;
});
})
</script>
</head>
<body>
<div align="center">
<h1>People</h1>
<ul>
<li><a href="files/andy.js">Andy</a></li>
<li><a href="files/jeremy.js">Jeremy</a></li>
<li><a href="files/richard.js">Richard</a></li>
</ul>
<div id="details"></div>
</div>
</body>
</html>