jQuery-Ajax的使用

最新推荐文章于 2024-05-16 02:23:50 发布

MingCode

最新推荐文章于 2024-05-16 02:23:50 发布

阅读量343

点赞数 4

分类专栏： jQuery Ajax 文章标签： jQuery ajax load $.ajax()

本文链接：https://blog.csdn.net/Dear_UU/article/details/91424563

版权

Ajax 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jQuery

0 篇文章 0 订阅

订阅专栏

jQuery-Ajax的使用

最近仙鱼在做一个小项目，被这个异步请求搞得很烦，于是今天决定来啃一啃这块大骨头。

啃完发现，嗯_真香希望你看完也会有收获。

本篇博客有以下两大内容：

原生的Ajax和jQuery的ajax(即$.ajax())方法的使用

jQuery的API中提供的五种快捷Ajax方法的使用

在开始之前,先做一个小提醒,如果你的项目是基于SSM框架,在处理ajax请求的handller方法上一定不要忘了打上@ResponseBody这个注解呀,ψ(._. )>或者,你可以试试不加看看前端页面有没有反应,嘿嘿~
还有一点，再使用时jQuery时请别忘记在页面上引入你喜欢版本的jQuery.js库
ps:因为CSDN编辑器的小问题,在编辑时加$有时候会转义成格式,就不显示 $ 所以有的地方我在$ .get()中间加了一个空格,是为了调整博客不显示的问题,实际上写的时候不加空格的,haha,你们明白就好~

1 原生Ajax和$.ajax()

原生的Ajax和$.ajax()适合发送put，delete请求（get，post当然也可，你需要对“restful”有一定的了解）或者发送json字符串时使用。

1.1 原生Ajax

原生的Ajax(Asynchronous JavaScript And XML),翻译过来就是异步的JavaScript和XML
意味着可以在不重新加载整个网页的情况下，对网页的某部分内容进行更新。

<%@ 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()

这个是仙鱼最喜欢的一个方法,对的记住这个方法是大boss就好啦~

常用的两种方法：$ .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])

$ .getJSON(url,[data],[callback])相当于$ .get()方法响应为json的简化形式，更多的用于跨域请求，同域请求使用$.get()方法就可以了

$.getScript(url,[callback])：动态的加载json格式数据或脚本

这两个用的比较少,我是真的懒得举例子了,我相信你们可以举一反三的,你们太棒啦!

3 Over

希望我的博文能对你有帮助,不足之处还请在评论中给出~

( •̀ ω •́ )✧感谢阅读,仙鱼祝您学习生活愉快~

MingCode

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
jQuery-Ajax的使用

jQuery-Ajax的使用最近仙鱼在做一个小项目，被这个异步请求搞得很烦，于是今天决定来啃一啃这块大骨头。啃完发现，嗯真香希望你看完也会有收获。本篇博客有以下两大内容：原生的Ajax和jQuery的ajax(即$.ajax())方法的使用jQuery的API中提供的五种快捷Ajax方法的使用在开始之前,先做一个小提醒,如果你的项目是基于SSM框架,在处理ajax请...
复制链接

扫一扫