使用jquery来防止重新提交表单

Question

我使用jquery的.submit()来拦截用户的提交事件,但是我发现了一个问题.

当用户单击提交按钮时,表单正常提交,但如果用户故意多次快速单击,则会多次提交,这将导致数据库中的重复数据.

这种问题的解决方案是什么？

更新:嗯,我看到一些建议说禁用提交按钮.这应该可以防止多次提交表单,但问题是我的页面中的表单元素没有刷新,如果我禁用它,用户将无法再提交它,禁用15秒可能会有效,但是这是解决这个问题的正确方法吗？

Answer 1

禁用提交按钮确实是要走的路.

但是,在很多情况下,要执行的服务器端逻辑取决于请求参数映射中是否存在有问题的提交按钮的名称 - 值对.特别是在基于服务器端组件的MVC框架(如MS ASP.NET和Sun JSF)中,以及具有多个提交按钮的"简单"形式.按下的提交按钮的名称 - 值对是必需的,用于确定要执行的操作.禁用该按钮会使其名称 - 值对完全消失在请求参数映射中,并且服务器端可能不会采取任何操作或执行错误的操作.

基本上有两种方法可以解决这个问题:

1. 用于setTimeout()在几毫秒后禁用该按钮,以便无论如何都可以发送其名称 - 值对.50毫秒是一个负担得起的数额.

   $("form").submit(function() {
       var form = this;
       setTimeout(function() {
           $(':submit', form).attr('disabled', true);
       }, 50);
   });
   

2. 将实际按下的提交按钮的名称 - 值对复制到表单的隐藏输入中.这有点棘手,因为如果没有这个信息,这个信息是不可用submit的<form>.您需要$(document)捕获最后一次单击的元素.

   $("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;
   });
   

更新:根据您的更新:

好吧,我看到一些建议说禁用提交按钮.这应该阻止多次提交,但问题是我的页面中的表单元素没有刷新,如果我禁用它,用户将无法再提交它,禁用15秒可能会有效,但这是解决这个问题的正确方法？

所以你实际上是在发出一个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', form).attr('disabled', false);
    });
});