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(CountDown, 1000);
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 (xhr, type, errorThrown) {
//异常处理；
mui.alert(type + ',detail:' + errorThrown);
doing = false; //变量改回false 表示结束操作
return false;
}
});
})
版权声明：若无特殊注明，本文皆为《菜鸟站长》原创，转载请保留文章出处。
本文链接：ajax请求场景下如果在后端结果返回给前端的时候，避免前端重复点击提交 - https://wlphp.com/?post=285
