jquery ajax 全局事件

最新推荐文章于 2022-10-09 11:45:52 发布

o_瓜田李下_o

最新推荐文章于 2022-10-09 11:45:52 发布

阅读量472

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43931625/article/details/107757785

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jquery ajax 全局事件

应用：发送ajax请求前后、响应成功、失败时做一些自定义处理

****************

ajax 全局方法

ajaxStart(callback)：ajax请求开始时调用

ajaxStop(callback)：ajax请求结束时调用

ajaxSend(callback)：ajax请求发送前调用

ajaxComplete(callback)：aax请求完成时调用，响应成功、失败均会调用

ajaxSuccess(callback)：ajax请求响应成功调用，

ajaxError(callback)：ajax请求响应失败调用

****************

示例

HelloController

@RestController
public class HelloController {

    @RequestMapping("/hello")
    public String hello(){
        return "hello 瓜田李下";
    }
}

test.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    $(function () {
        $("#btn").click(function () {
            $.get({
                url: "/hello",
                success: function (data) {
                    $("span").html("<strong style='color: green'>"+data+"</strong><br>")
                }
            })
        });

        $(document).ajaxStart(function () {
            console.log("ajax 请求开始："+new Date().getTime())
        });

        $(document).ajaxSend(function () {
            console.log("ajax 请求发送："+new Date().getTime())
        });

        $(document).ajaxSuccess(function () {
            console.log("ajax 请求响应成功："+new Date().getTime())
        });

        $(document).ajaxError(function () {
            console.log("ajax 请求响应失败："+new Date().getTime())
        });

        $(document).ajaxComplete(function () {
            console.log("ajax 请求完成："+new Date().getTime())
        });

        $(document).ajaxStop(function () {
            console.log("ajax 请求结束："+new Date().getTime())
        })
    });
</script>
<body>
<div th:align="center">
    <span></span>

    <button id="btn">加载数据</button>
</div>
</body>
</html>

点击按钮