jQuery-Ajax的使用
最近仙鱼在做一个小项目,被这个异步请求搞得很烦,于是今天决定来啃一啃这块大骨头。
啃完发现,嗯真香希望你看完也会有收获。
本篇博客有以下两大内容:
-
在开始之前,先做一个小提醒,如果你的项目是基于SSM框架,在处理ajax请求的handller方法上一定不要忘了打上@ResponseBody这个注解呀,ψ(._. )>或者,你可以试试不加看看前端页面有没有反应,嘿嘿~
-
还有一点,再使用时jQuery时请别忘记在页面上引入你喜欢版本的jQuery.js库
-
ps:因为CSDN编辑器的小问题,在编辑时加$有时候会转义成格式,就不显示 $ 所以有的地方我在$ .get()中间加了一个空格,是为了调整博客不显示的问题,实际上写的时候不加空格的,haha,你们明白就好~
1 原生Ajax和$.ajax()
1.1 原生Ajax
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>ajax GET/POST</title> </head> <body> <div id="show"></div> <input type="button" value="ajax发送get请求" οnclick="ajaxDoGet()"> <input type="button" value="ajax发送post请求" οnclick="ajaxDoPost()"> <script type="text/javascript"> function ajaxDoGet() { //1.创建XMLHTTPRequest对象 var xhl = new XMLHttpRequest(); //2.设置onreadystatechange回调函数(异步,如果同步不需要) xhl.onreadystatechange = function () { if (xhl.readyState == 4 && xhl.status == 200) { // document.getElementById("show").innerHTML = xhl.responseText; alert(xhl.responseText); } } //3.open method get/post url 异步还是同步 xhl.open("get", "ajaxservlet?username=Tom&address=北京", true); //4.send xhl.send(); } function ajaxDoPost() { //1.创建XMLHTTPRequest对象 var xhl = new XMLHttpRequest(); //2.设置onreadystatechange回调函数(异步,如果同步不需要) // console.log(xhl.readyState); xhl.onreadystatechange = function () { if (xhl.readyState == 4 && xhl.status == 200) { // document.getElementById("show").innerHTML = xhl.responseText; alert(xhl.responseText); } } //3.open method get/post url 异步还是同步 xhl.open("post", "ajaxservlet", true); xhl.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //4.send xhl.send("username=Tom&address=北京"); } </script> </body> </html>
1.2 $.ajax()
常用的两种方法:$ .ajax(url,[settings])和$.ajax(settings),此时url是setting的一个属性
我喜欢用第二种方法,强迫症必须一排属性排好,哈哈,接下来分别说一下属性们:
处理响应结果的回调函数:success:请求成功之后的回调函数,error:请求失败之后的回调函数,statusCode:指明了返回某种状态码对应的回调函数,complete:请求不管是成功还是失败的回调函数
请求数据:data,processData(指定data是否进行转码:true/false,默认为true),contentType,traditional
相应数据:dataType,dataFilter:对返回的原始数据预处理
请求类型:type:get|post|put|delete…默认为get
同步异步:async:true/false,默认为true(异步)
是否缓存:cache:true/false,默认为true
前置处理:beforeSend
headers:设置请求头
<javascript type="text/javascript"> $.ajax({ url:"${pageContext.request.contextPath}/user/getAllUsers", type:'post', //data可以直接拼接在url后面,也可以在下面进行设置 data:"name=张三&age=19", contentType:"application/x-www-form-urlencoded", //dataType:"html", dataFilter:"json", async:true,//默认是异步,你觉得这个还需要写吗? success:function(data){ alert(data); }, }); </javascript>
2 jQuery五种快捷API方法
-
在说这五种快捷API方法之前你要明白一点,前面的$ .ajax()方法是一个超级强大的方法,后面的这五种快捷API方法最终都是调用的$.ajax()方法完成的最终请求,后面的只是使用便捷而已,前面大佬方法一定要熟练使用
-
当中需要发送普通的Json对象或键值对时,使用jQuery的API中提供的五种快捷方法更加便捷
-
这五种快捷方法都只能处理请求成功时候的回调函数,对于请求失败我们看不到任何的响应
2.1 $ .get()/$.post()
$.get(url,[data],[callback],[type])
$.post(url,[data],[callback],[type])
上面两种方法的在参数、使用方法、API中完全相同,唯一不同点就是请求的方式(method)不同,一个是get,一个是post
下面分别介绍一下参数:
url:请求路径,是唯一的必要参数
[data]:请求数据,这里必须是key-value的形式,若是get请求,在编码后会附加到url的后面,如果是post请求,编码后会放到request的body里面
[callback]:请求成功之后的回调函数,可以接收请求成功之后的服务器响应的数据(data(相应数据),callbacktype(永远是success),jqXHR)
[type]:指定当前请求返回数据的编码格式,若不指定type,程序会根据响应头中的ContentType来决定编码格式,如:text|html|json|script
<script type="text/javascript"> function get() { $.get("${pageContext.request.contextPath}/user/getAllUsers",function(data,callbacktype,jqXHR){ alert(data); }); } //一般来说,回调函数的三个参数我们只用data function post() { $.post("${pageContext.request.contextPath}/user/getAllUsers",function(data,callbacktype,jqXHR){ alert(data); }); } </script>
2.2 $(selector).load(url,[data],[callback])
到后端加载一个页面片段,放到selector所代表的容器中
调用者是一个dom结点,注意区分
与上面的$ .get()/$ .post()方法相比,少了第四个type参数,因为不管返回的数据是什么类型,$(selector).load()最后都会将返回数据转化成文本,在插入到容器中,但是啊,就是有那么个例外,当返回值对象为json字符串时,需要解析成 js对象,记得欧~
若只有url,那默认发送的是get请求,若是url+[data],那会自动转化为post请求
<scirpt type="text/javascript"> function doLoad(){ //mydiv为我自己定义的一个div的id $("#mydiv").load("${pageContext.request.contextPath}/user/getAllUsers",function(){ alert("Success!"); }); } </scirpt>
2.3 $ .getJSON()/$.getScript()
$.getJSON(url,[data],[callback])
$.getScript(url,[callback])
3 Over
希望我的博文能对你有帮助,不足之处还请在评论中给出~
( •̀ ω •́ )✧感谢阅读,仙鱼祝您学习生活愉快~