问题描述:
在前端页面写弹窗中的表单提交按钮和提交方法时,会出现一个按钮可以短时间内多次点击,导致方法内的后台请求进行了多次,这可能会出现一系列问题,比如添加数据重复等
解决方法:
在方法内添加按钮的点击状态,具体如下:
<!-- 打开添加弹窗的按钮 -->
<button onclick="openAddModal()">添加</button>
<!-- 添加弹窗中form表单的提交按钮 -->
<button onclick="addFunction()">添加</button>
// 弹窗添加按钮的状态(防止多次请求ajax)
var saveBtnSta = true;
// 添加方法
function addFunction() {
var data = '';// 请求传输的数据
if ( saveBtnSta ) {
saveBtnSta = false;
$.ajax({
url: "",
type: "post",
dataType: "json",
data: data,
success: function(data) {
if (data.status == "success") {
// 成功后的提示等操作
} else {
saveBtnSta = true;
// 失败后的提示等操作
}
}
});
}
}
// 打开添加弹窗方法
function openAddModal() {
saveBtnSta = true;
// 弹窗表单的赋值等操作
}
- 注意:添加成功后不能马上将状态改为
true
,要放到下次添加的时候再进行赋值(比如例子中的打开弹窗的时候)