如何防止使用serialize的PHP/Ajax脚本多次提交？

我正在使用PHP/Ajax/serialize向自己提交一个简单的表单。我使用以下JavaScript将其设置为序列化/发布数据。您可以在上看到演示。有一个指向该脚本的.txt版本的链接

$(function() {
  var form = $("#addtocart");
  $(form).submit(function(e) {
    e.preventDefault();
    var formData = $(form).serialize();
    $("#result").html( "" );
    $.ajax({
      type: "POST",
      url: $(form).attr("action"),
      data: formData,
      success: function(html) { $("#result").html(html); }
    })
  });
});

---

单击“立即购买”按钮后，它应该只向数据库添加一行。第一次单击按钮时，它会添加一行。如果再次单击，则会添加两行新行，然后添加三行新行，以此类推。如果单击“提交”，则会依次添加更多行。要停止此操作，必须重新加载表单。

将按钮的id放入

id=“addtocart\u id”

---

仅供参考，

表单

已经是jQuery对象。您不需要一直将其包装在

$（表单）

您可以禁用buy按钮，直到ajax过程完成。您的HTML结构是什么样的？您的

#addtocart

表单是否包含

#result

元素？AJAX响应中返回的HTML是什么？您似乎在AJAX响应中返回一个完整的HTML文档，其中包含向表单中添加更多提交事件处理程序的脚本。不要这样做，只需使用您想要插入到

#结果中的HTML代码片段进行响应

我按照您的建议重新组织了文档，它似乎可以正常工作。Thx作为解决方案我很好。我没有尝试Rajkumar提供的答案，但是thx。

$(function() {
  var form = $("#addtocart");
  var count_btn = true;
  form.submit(function(e) {
    e.preventDefault();
    if(count_btn){
      var formData = form.serialize();
      $("#result").html("");
      $.ajax({
        type: "POST",
        url: form.attr("action"),
        data: formData,
        beforeSend: function () {
          $("#addtocart_id").html("Please Wait...").prop("disabled", true);
        },
        success: function(html) { $("#result").html(html); }
        complete: function(){
                  count_btn = false;
                  $("#addtocart_id").html("Now Reload from browser");
        }
      })
    }
  });
});