您好,登录后才能下订单哦!
这篇文章主要介绍JQuery中的Ajax怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
JQuery对Ajax操作进行了封装,在JQuery的最底层的方法是$.ajax(),第二层是load() $.get() $.post(), 第三层是$.getScript()和$.getJSON().
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ var url = this.href; var args = {"time":new Date()}; $("#content").load(url, args); return false; }); }); </script> </head> <body> <a href="helloAjax.txt">hello</a> <div id="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
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ //var url = this.href;//默认全选择 //var url = this.href + " h3";//选择h3部分 var url = this.href + " h3 a";//选择h3中的a部分 var args = {"time":new Date()}; $("#details").load(url, args); return false; }); }) </script> </head> <body> <ul> <li><a href="a.html">百度</a></li> </ul> <div id="details"></div> </body> </html>
a.html
<a href="http://www.baidu.com">http://www.baidu.com</a> <h3> H2 Test <a href="http://www..com">QQ</a> </h3>
$.get()(或$.post())方法
$.get()方法使用GET方式来进行异步请求,结构是$.get(url[,data][,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对象进行操作的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ var url = this.href; var args = {"time":new Date()}; //args :JSON格式 //function 回调函数,当相应结束时被触发。响应结果在data中 $.post(url, args, function(data){ //$.get(url, args, function(data){//这里使用post和get无区别 var name = $(data).find("name").text(); var website = $(data).find("website").text(); var email = $(data).find("email").text(); $("#details").empty().append("<h3><a href='mailto:"+email+"'>"+name+"</a></h3>") .append("<a href='"+website+"'>"+website+"</a>"); }); return false; }); }) </script> </head> <body> <ul> <li><a href="andy.xml">andy</a></li> </ul> <div id="details"></div> </body> </html>
andy.xml
<?xml version="1.0" encoding="UTF-8"?> <details> <name>Andy Budd</name> <website>http://www.baidu.com</website> <email>umgsai@126.com</email> </details>
下面使用json格式数据来实现上面的功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ var url = this.href; var args = {"time":new Date()}; //args :JSON格式 //function 回调函数,当相应结束时被触发。响应结果在data中 $.getJSON(url, args, function(data){ var name = $(data).person.name; var website = $(data).person.website; var email = $(data).person.email $("#details").empty().append("<h3><a href='mailto:"+email+"'>"+name+"</a></h3>") .append("<a href='"+website+"'>"+website+"</a>"); }); return false; }); }) </script> </head> <body> <ul> <li><a href="andy.json">andy</a></li> </ul> <div id="details"></div> </body> </html>
andy.json
{"person":{ "name":"umgsai", "website":"http://www.baidu.com", "email":"umgsai@126.com" } }
小结:
什么是Ajax? 不用刷新页面,但可以和服务器端进行通信的方式。使用Ajax的主要方式是XMLHttpRequest对象
使用XMLHttpRequest对象实现Ajax(了解)。现在一般使用JQuery或者其他的JS框架来获取。
Ajax传输数据的三种方式
①XML:笨重,解析困难。但XML是通用的数据交换格式
②HTML:不需要解析可以直接放到文档中,若仅更新一部分区域,但传输的数据不是很方便,切HTML代码需要拼装完成。
③JSON:小巧,有面向对象的特征,并且提供很多第三方的Jar包把Java对象或集合转成Json字符串。是目前使用最多的方式。
使用JQuery完成Ajax操作
①load方法:可以用于HTML文档的元素结点,把结果直接加为对应结点的子元素。通常load方法加载的数据是HTML片段。
var $obj = ...
var url = ...
var agrs = {key:value,...};
$obj.load(url, args);
② $.get $.post $.getJSON 更加灵活。除去使用load方法的情况,大部分使用这三个方法。
//url:Ajax请求的目标URL
//args:传递的参数 JSON类型
//data: Ajax响应成功后的数据,可能是XML HTML JSON
$.get(url, args, function(data){
});
请求JSON数据
$.get(url, args, function(data){
}, "JSON");
$.post(url, args, function(data){
}, "JSON")
$.getJSON(url, args, function(data){
})
以上是“JQuery中的Ajax怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。