当用户单击提交按钮时,表单会正常提交,但如果用户故意多次快速单击,则会多次提交,这将导致数据库中出现重复数据.
这种问题的解决方案是什么？
更新：嗯,我看到一些建议说禁用提交按钮.这应该可以防止表单被多次提交,但问题是我的页面中的表单元素没有刷新,如果我禁用它,用户将无法再提交它,禁用15秒可能会有效,但是这是解决这个问题的正确方法吗？
解决方法
但是,在很多情况下,要执行的服务器端逻辑取决于请求参数映射中存在的提交按钮的名称 – 值对.特别是在基于服务器端组件的MVC框架(如MS ASP.NET和Sun JSF)中,以及具有多个提交按钮的“简单”形式.按下的提交按钮的名称 – 值对是必需的,用于确定要执行的操作.禁用该按钮会使其名称 – 值对完全消失在请求参数映射中,并且服务器端可能不会采取任何操作或执行错误的操作.
>使用setTimeout()在几毫秒后禁用该按钮,以便无论如何都要发送其名称 – 值对. 50毫秒是一个负担得起的数额.
$("form").submit(function() {
var form = this;
setTimeout(function() {
$(':submit',form).attr('disabled',true);
},50);
});
>将实际按下的提交按钮的名称 – 值对复制到表单的隐藏输入中.这有点棘手,因为此信息在< form>的提交事件中不可用.您需要让$(文档)捕获最后一次单击的元素.
$("form").submit(function() {
$(':submit',this).attr('disabled',true);
$(this).append($('<input/>').attr({
type: 'hidden',name: $.lastClicked.name,value: $.lastClicked.value
}));
});
$(document).click(function(e) {
e = e || event;
$.lastClicked = e.target || e.srcElement;
});
更新：根据您的更新：
Well,I see some of the advice said disabling the submit button. This should prevent the from submit multiple times,but the problem is the form element in my page isn’t refreshed,if I disable it the user won’t be able to submit it anymore,disabling it for 15s may work,but is this the right way to solve this problem ?
所以你实际上是在发出一个ajaxical请求.你可以重新启用jQuery的ajax函数的回调处理程序中的按钮.假设您正在使用jQuery.post：
$("form").submit(function() {
// Disable buttons here whatever way you want.
var form = this;
$.post('some/url',function(data) {
// Re-enable buttons at end of the callback handler.
$(':submit',false);
});
});
