提交时 AJAX 表单重复条目

Question

我已经设置了一个 PHP 表单，它本身就可以正常工作，但现在我已经将它与 AJAX 连接起来，当有人提交表单时，我会收到重复提交，所以即使他们只提交了多次向数据库添加详细信息后的表单。

从我的测试看来，它似乎发送了两次数据，但查看其他人的提交，在某些情况下它可能会发送两次以上，但我无法复制。

这是我最初使用的代码：

$("#email-gather").submit(function(e) {

    var url = "https://www.ruroc.com/emailgather.php";

        $.ajax({
               type: "POST",
               url: url,
               data: $("#email-gather").serialize(),
               complete: function(data) { 
                    $('.email-win input.button').val("submitted").attr('disabled', 'disabled').css({'background-color' : '#b34c4c','text-shadow' : 'none'});
               }
        });
        e.preventDefault();
    }); 

我环顾四周寻找解决方案，我看到一些有类似问题的人说应该使用 .live 而不是 .submit 所以我修改了我的代码：

$( "#email-gather" ).live( "submit", function() {

  event.preventDefault();
  var url = "https://www.ruroc.com/emailgather.php";

    $.ajax({
           type: "POST",
           url: url,
           data: $("#email-gather").serialize(),
           complete: function(data) { 
                $('.email-win input.button').val("submitted").attr('disabled', 'disabled').css({'background-color' : '#b34c4c','text-shadow' : 'none'});
           }
    }); 
});

但是，这也导致了同样的问题，所以我希望您能找到解决此问题的方法。感谢您就此事提供的任何帮助。

Answer 1

在代码的第二部分（应该可以）中，您有 event.preventDefault 但未定义事件。尝试添加功能（事件），它必须工作。

否则在第一个中，您可以在 ajax 调用之前将 prevent default 并带走第二个提交。您需要在 ajax 函数中添加一个 return true 来告诉您脚本提交成功。