防止重复发送Ajax请求问题

在工作中有很多场景需要通过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; //
    $('#msg').click(function(){
        if(lock) return;
        lock=true;
        setTimeout(function(){
            $.ajax({
                url:'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=wise_web',
                type:'get',
                data:{
                    'wd':'c'
                },
                jsonp:'cb',
                jsonpCallback:'jshow',
                dataType : 'jsonp',
                success:function(res){
                    lock=false;
                    console.log(res)
                },
                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操作
        }
    })

当然，具体问题具体分析。结合实际问题适当调整思路才能找到更好的解决方法。

转载：https://blog.csdn.net/jianglittlebai/article/details/79090194

防止重复发送Ajax请求问题

猜你喜欢