jQuery对Ajax操作进行了封装,在jQuery中最底层的方法时 .ajax(),第二层是load(), . a j a x ( ) , 第 二 层 是 l o a d ( ) , .get() 和 .post(),第三层是 . p o s t ( ) , 第 三 层 是 .getScript() 和 $.getJSON()
1、
load()
在html中加载Ajax
<script src="../script/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href + " h2 a";//取链接中的h2中的a部分,注意选择器之间空格
var args = {"time":new Date()};
//任何一个html 节点都可 使用load方法来加载Ajax,结果将直接插入html节点
$("#details").load(url,args);
return false;
});
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="andy.html">Andy</a></li>
<li><a href="richard.html">Richard</a></li>
<li><a href="jemery.html">Jemery</a></li>
</ul>
<div id="details">
</div>
</html>
2、
.get()和
.
g
e
t
(
)
和
.post() 对xml文件下数据的加载
<script src="../script/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
//url;
//args: JSON格式
//function:回调函数:当相应结束时,回调函数被触发。响应结果在data中
$.post(url, args, function(data){
var name = $(data).find("name").text();
var email = $(data).find("email").text();
var website = $(data).find(website).text();
$("#details").empty()
.append("<h2><a href='maito:"+ email +"'>"+ name +"</a></h2>")
.append("<a href='" + website + "'>" + website +"</a>");
});
return false;
});
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="andy.xml">Andy</a></li>
<li><a href="richard.html">Richard</a></li>
<li><a href="jemery.html">Jemery</a></li>
</ul>
<div id="details">
</div>
</html>
3、
getJSON(), 返回的data是JSON对象
<script src="../script/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
var url = this.href;
var args = {"time":new Date()};
//url;
//args: JSON格式
//function:回调函数:当相应结束时,回调函数被触发。响应结果在data中
$.getJSON(url, args, function(data){
var name = data.person.name;
var email = data.person.email;
var website = data.person.website;
$("#details").empty()
.append("<h2><a href='maito:"+ email +"'>"+ name +"</a></h2>")
.append("<a href='" + website + "'>" + website +"</a>");
});
return false;
});
});
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li><a href="andy.xml">Andy</a></li>
<li><a href="richard.html">Richard</a></li>
<li><a href="jemery.html">Jemery</a></li>
</ul>
<div id="details">
</div>
</html>