PHP菜鸟博客_共同学习分享PHP技术心得【PHP爱好者】
ajax请求场景下如果在后端结果返回给前端的时候,避免前端重复点击提交
2021-8-5 菜鸟站长


1.原理就是定义的doing的js变量初始化为false



2.在点击事件里面,发送ajax之前,增加一个判断doing变量是否为true,如果为true则阻止继续发送ajax请求,并给出避免重复提交的警示。



3.如果为false的话,在发送ajax之前把doing改成为true,意思是ajax请求已经发起,不能再次发起第二个请求。



4.在ajax返回的错误回调里面把doing改为false,也就是按钮就又可以点击了



5.在ajax正确的回调里面,如果是个跳转则没有必要把doing改为false了,如果是类似发送验证码之类的倒计时多久后可以重复再次点击。可以在倒计时结束里面把doing改为false。








示例代码:







<script>


    $(function () {


        var doing = false;//定义一个全局变量


        $("[link=getcode]").click(function () {


            var phone = $("[name=phone]").val();


            if (phone == '') {


                mui.alert("手机号不能为空!");


                return false;


            }


            //提示


            layer.open({


                content: '正在获取,请稍等'


                , skin: 'msg'


                , time: 2 //2秒后自动关闭


            });




            if (doing) {


                //提示


                layer.open({


                    content: '请求正在处理请稍后再试'


                    , skin: 'msg'


                    , time: 2 //2秒后自动关闭


                });


                return false;


            }




            doing = true;//变量设为true,表示开始操作




            $.post("{:url('Ajax/GetSmsCode')}", {


                phone: phone,


            }, function (data) {


                //获取成功


                if (data.slay == '0') {


                    //验证码获取成功后


                    var count = 60;


                    var countdown = setInterval(CountDown1000);


                    function CountDown() {


                        $("[link=getcode]").attr("disabled"true).css("background""#FFD249");


                        $("[link=getcode]").val(count + " 秒后获取");


                        if (count == 0) {


                            $("[link=getcode]").val("重新获取").removeAttr("disabled").css("background""#fff");


                            doing = false//变量改回false 表示结束操作


                            clearInterval(countdown);


                        }


                        count--;


                    }


                    layer.open({


                        content: data.rs


                        , skin: 'msg'


                        , time: 2 //2秒后自动关闭


                    });




                } else {


                    layer.open({


                        content: data.rs


                        , skin: 'msg'


                        , time: 2 //2秒后自动关闭


                    });


                    doing = false//变量改回false 表示结束操作


                }


            }, 'json')


        })


    })


</script>











<script>




    var doing = false;//定义一个全局变量


    //验证卡密/手机


    mui(".index_input").on('tap''#sub'function () {


        var phone = $("[name=phone]").val(); //手机号


        var code = $("[name=code]").val(); //验证码


        if (phone == '') {


            mui.alert("手机号不能为空!");


            return false;


        }


        var ajax_url = "{:url('Ajax/CheckPhone')}";


        var data = {


            phone: phone,


            code: code,


        };




        if (doing) {


            //提示


            layer.open({


                content: '请求正在处理请稍后再试'


                , skin: 'msg'


                , time: 2 //2秒后自动关闭


            });


            return false;


        }




        doing = true;//变量设为true,表示开始操作


        //提交验证


        mui.ajax(ajax_url, {


            data: data,


            dataType: 'json'//服务器返回json格式数据


            type: 'post'//HTTP请求类型


            timeout: 5000//超时时间设置为10秒;ms


            headers: {


                'Content-Type': 'application/json'


            },


            success: function (data) {


                if (data.slay != 0) {


                    mui.alert(data.rs);


                    doing = false//变量改回false 表示结束操作


                    return false;


                }


                //提示


                layer.open({


                    content: data.rs


                    , skin: 'msg'


                    , time: 2 //2秒后自动关闭


                    , end: function () {


                        window.location.href = "{:url('User/index')}"


                    }


                });




            },


            error: function (xhrtypeerrorThrown) {


                //异常处理;


                mui.alert(type + ',detail:' + errorThrown);


                doing = false//变量改回false 表示结束操作


                return false;


            }


        });


    })




发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容