优雅的ajax请求(用disable防止重复请求)

绝地灬酷狼 2022-04-11 12:23 377阅读 0赞

### 优雅的ajax请求 \[用disable防止重复请求\] ###

*   *  处理思路
     *  ajax简单介绍
     *   *  ajax参数(部分)
         *  ajax状态(部分)
     *  代码示例
     *  按钮部分代码
     *   *  ajax部分代码

> 在前后端交互的时候回经常用到ajax进行请求, 然而如果没有限制的话会造成一个请求发送多次, 如果后台没有进行`幂等`处理的话, 还会造成数据的错误, 即使有做`幂等`处理, 这种重复的没有意义的请求也应该直接拦住, 避免二外的开销

## 处理思路 ##

我们只想要请求正确的发送一次, 所以我们可以在发送的同时对按钮进行处理, 防止用户因为网络原因多次点击重复发送

*  发送前: 将按钮置为不可用 `disabled=true`
 *  发送后: 将按钮恢复 `disabled=false`

一般如果业务(主要是新增, 修改, 删除)处理完毕直接就跳走了, 也就不存在再次点击的情况

## ajax简单介绍 ##

> Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

*  Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
 *  Ajax 是一种用于创建快速动态网页的技术。
 *  Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

### ajax参数(部分) ###

*  `url` : 请求地址
 *  `data` : 请求参数
 *  `dataType` : 请求参数类型
 *  `type` : 请求类型

### ajax状态(部分) ###

*  `beforeSend` : 请求发送前
 *  `success` : 请求响应成功

## 代码示例 ##

注意: `$("#shiftBtn")`取的是`button`的id, 要能对上, 否者无法操作按钮

或者通过`js`方法将按钮传递进去也可以

## 按钮部分代码 ##

### ajax部分代码 ###

在`beforeSend`的时候讲按钮置为`disabled`

$.ajax({ 
        type:"post",
        url:url,
        data:params,
        dataType:'json',
        beforeSend:function(){ 
            $("#shiftBtn").attr("disabled",true)
        },
        success:function(data, status){ 
            if(data.result==true){ 
                x.alert(data.message,function(){ 
                    x.closeDialog();
                    window.location.href = reloadUrl;
                });
            }else{ 
                x.alert(data.message);
                $("#shiftBtn").attr("disabled",false)
            }
        },
    });