jquery - 使用 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;
   });
   

---

更新:根据您的更新:

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', form).attr('disabled', false);
    });
});