Ajax学习笔记-JQuery中的Ajax
|
JQuery对Ajax操作进行了封装，在JQuery的最底层的方法是$.ajax(),第二层是load() $.get() $.post(),第三层是$.getScript()和$.getJSON(). <!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
varurl=this.href;
varargs={"time":newDate()};
$("#content").load(url,args);
returnfalse;
});
});
</script>
</head>
<body>
<ahref="helloAjax.txt">hello</a>
<divid="content"></div>
</body>
</html>
load()方法是JQuery中最为简单和常用的Ajax方法，能载入远程的HTML代码并插入到DOM中。它的结构是 load（url[,data][,callback]） url （String）请求HTML页面的URL地址 data（可选）(Object)发送到服务器的key/value数据 callback（可选） (Function)请求完成时的回调函数，无论请求成功或失败 可以使用url selector <!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
//varurl=this.href;//默认全选择
//varurl=this.href+"h2";//选择h2部分
varurl=this.href+"h2a";//选择h2中的a部分
varargs={"time":newDate()};
$("#details").load(url,args);
returnfalse;
});
})
</script>
</head>
<body>
<ul>
<li><ahref="a.html">百度</a></li>
</ul>
<divid="details"></div>
</body>
</html>
a.html <ahref="http://www.baidu.com">http://www.baidu.com</a> <h2> H2Test <ahref="http://www..com">QQ</a> </h2>
$.get()(或$.post())方法 $.get()方法使用GET方式来进行异步请求，结构是$.get(url[,callback][,type]) url （String）请求HTML页面的URL地址 data（可选）(Object)发送到服务器的key/value数据,数据位作为QueryString附加到请求的url中 callback（可选） (Function)载入成功时的回调函数（只有当reponse的返回状态是success时才调用该方法）自动将请求结果和状态传递给该方法 type(可选)(String)服务器返回内容的格式，包括xml、html、script、json、text、default textstatus代表请求状态，包括success error notmodify timeout $.get() $.post() 是JQuery中的全局函数 find() 等方法都是对JQuery对象进行操作的方法 <!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
varurl=this.href;
varargs={"time":newDate()};
//args:JSON格式
//function回调函数，当相应结束时被触发。响应结果在data中
$.post(url,args,function(data){
//$.get(url,function(data){//这里使用post和get无区别
varname=$(data).find("name").text();
varwebsite=$(data).find("website").text();
varemail=$(data).find("email").text();
$("#details").empty().append("<h2><ahref='mailto:"+email+"'>"+name+"</a></h2>")
.append("<ahref='"+website+"'>"+website+"</a>");
});
returnfalse;
});
})
</script>
</head>
<body>
<ul>
<li><ahref="andy.xml">andy</a></li>
</ul>
<divid="details"></div>
</body>
</html>
andy.xml <?xmlversion="1.0"encoding="UTF-8"?> <details> <name>AndyBudd</name> <website>http://www.baidu.com</website> <email>umgsai@126.com</email> </details> 下面使用json格式数据来实现上面的功能 <!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="../js/jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
$(function(){
$("a").click(function(){
varurl=this.href;
varargs={"time":newDate()};
//args:JSON格式
//function回调函数，当相应结束时被触发。响应结果在data中
$.getJSON(url,function(data){
varname=$(data).person.name;
varwebsite=$(data).person.website;
varemail=$(data).person.email
$("#details").empty().append("<h2><ahref='mailto:"+email+"'>"+name+"</a></h2>")
.append("<ahref='"+website+"'>"+website+"</a>");
});
returnfalse;
});
})
</script>
</head>
<body>
<ul>
<li><ahref="andy.json">andy</a></li>
</ul>
<divid="details"></div>
</body>
</html>
andy.json {"person":{
"name":"umgsai","website":"http://www.baidu.com","email":"umgsai@126.com"
}
}
小结：
$.getJSON(url,function(data){ }) （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |