版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_38287952/article/details/82623947
防止数据重复提交
在实际项目开发中,提交表单时常常由于网络或者其原因,用户点击提交按钮误认为自己没有操作成功,进而会重复提交按钮操作次数,如果页面前端代码没有做一些相应的处理,通常会导致多条同样的数据插入数据库,导致脏数据的增加。要避免这种现象,在$.ajax请求中的beforeSend方法中把提交按钮禁用掉,等到Ajax请求执行完毕,在恢复按钮的可用状态。
$.ajax({
//几个参数需要注意一下
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "{:url('ask/getUserAnswerData')}" ,//url
data: {'id' : id, 'content' : content } ,
beforeSend: function () {
// 禁用按钮防止重复提交
$(".write-btn").attr({ disabled: "disabled" });
},
success: function (data) {
if (data.code == 1) {
layer.open({
content: data.msg
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
setTimeout(function() {
window.location.href = data.url;
}, 2000);
} else if (data.code == 0) {
layer.open({
content: data.msg
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
// 移除 disabled
$(".write-btn").removeAttr('disabled');
}
},
error : function() {
alert("异常!");
}
});