防止重复发送Ajax请求问题

逃离我推掉我的手 2022-06-01 02:42 232阅读 0赞

在工作中有很多场景需要通过Ajax请求发送数据，像是注册、登录、提交用户反馈等。用户在点击了“确认”按钮之后有可能一段时间内没有收到反馈页面无任何反应，然后就接着连续多次点击“确认”按钮导致发送n个重复的请求，给服务器造成不小压力。

那，有没有办法解决重复发送请求的问题呢？

从前端解决重复发送请求的方法是有的。

1、点击“确定”之后禁用该按钮

>     <input type="button"  id="submit-btn">
>     <script>
>       var btn=$("#submit-btn");
>       btn.onclick=function(){
>            btn.attr('disabled',true)
>        }
>     </script>

2、使用变量进行上锁

> 思路如下：声明变量lock，当lock值为true，禁止再次发送请求，当lock值为false，可以发送请求。在Ajax返回success或者error的回调函数中将lock置为false，也就是说只有当服务器给出响应之后才可以再次发送请求。
> 
>     var lock=false; // 
>     // 假设是点击一个button发送Ajax请求的
>     $btn.on('click',function(){
>         if(lock){
>             return;
>         }
>         lock=true; // 修改lock状态为true
>         $.ajax({
>             url:'/getdata/info/item.php',
>             type:'post',
>             dataType:'json',
>             data:"data",
>             success:function(){
>                 lock=false;
>                 ........... // 其他的操作
>             },
>             error:function(){
>                 lock=false;
>                 ........ //进行其他操作
>             }
>         })
>     })

3、设置时间，在规定时间内不允许再次发送请求

>  
> 
> 和方法二类似，不同点在于决定是否可以再次发送求情的条件是是否超过规定时间（3s、5s或其他时间）。
> 
>  
> 
> 在最开始，声明变量lock=false。点击“确定”按钮，触发请求并将lock置为true。在规定时间之后（以3s为例）将lock置为false，此时就可以再次发送请求了。
> 
>     var lock=false;
>     $btn.on('click',function(){
>         if(lock){
>             return;
>         }
>         lock=true;
>         setTimeOut(function(){
>             lock=false;
>         },3000) // 3s后将lock设置为false, lock为false时就可以再次发送请求了。。。。。。
>         $.ajax({
>             type:'post',
>             url:'/getdata/info/item.php',
>             dataType:'json',
>             data:'data',
>             success:function(){
>                 ....... //xxx操作
>             },
>             error:function(){
>                 ...... // xxx操作
>             }
>         })
>     })
> 
> 当然，具体问题具体分析。结合实际问题适当调整思路才能找到更好的解决方法。  
>  
> 
>