jquery ajax 全局事件

小鱼儿 2023-03-04 09:21 67阅读 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>

**点击按钮**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkzMTYyNQ_size_16_color_FFFFFF_t_70]: /images/20230208/28a7890c5db04e8bbc1cae9cb12f1d98.png