ajax请求场景下如果在后端结果返回给前端的时候,避免前端重复点击提交

  • 内容
  • 评论
  • 相关

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;
            }
        });
    })

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:ajax请求场景下如果在后端结果返回给前端的时候,避免前端重复点击提交 - http://wlphp.com/?post=285

发表评论

电子邮件地址不会被公开。 必填项已用*标注