Jquery Ajax 双峰峰会答案

【问题标题】：Jquery Ajax Double SummitJquery Ajax 双峰峰会
【发布时间】：2017-03-13 14:53:18
【问题描述】：

我有这个问题，我的表单双重发布数据（通过单击在表中创建了 2 个条目）。我遵循了有关 stackoverflow 的建议，但似乎没有任何效果。可能是什么问题？我是一个使用 AJAX 的菜鸟，所以我必须假设我在做一些愚蠢的事情

这个脚本的基本逻辑是，提交和保存数据，如果成功返回成功则重定向，否则在DIV中显示输出和错误信息。

我尝试过的建议：

How can I prevent a double submit($.post) with jQuery

Prevent double submission of forms in jQuery

到目前为止我的代码：

$(document).ready(function() {
  $("#go").click(function(e) {
    e.preventDefault()
    e.stopImmediatePropagation();
    $.ajax({
      type: "POST",
      url: "controllers/newcases_controller.php",
      data: $('#casedata').serialize(),
      success: function(response) {
        if (response == 'success')
          window.location.replace("listcases.php");

        else
          /* clear old results, then display the new results */
          $("#divResults").empty().append(response);
      }
    });

    return false;
  });
});

这是表单的一部分，但我假设您只希望看到按钮是如何定义的

<form role="form" class="form-horizontal" id="casedata">    
    <div class="form-group">
      <label class="col-sm-12" for="TextArea">Additional Address Details [ Max 200 Characters ] <span id="countdown2"></span></label>
      <div class="col-sm-12"><textarea class="form-control" id="additionaladdressdetails" name="additionaladdressdetails" placeholder="e.g Unit 123, Complex Street Name"></textarea></div>
    </div>



    <div class="form-group">
      <div class="col-sm-12">
        <button type="reset" class="btn btn-default pull-right">Cancel</button>
        <button type="button" id="go" name="go" class="btn btn-primary pull-right">Create Case</button>     
      </div>
    </div>

</form>

建议下一步尝试？

【问题讨论】：

能否请您提供您正在使用的html
#go 类型不是submit我假设？
当您在 html 中包含两次 js 文件时也会发生这种情况。

标签： jquery ajax post http-post double

【解决方案1】：

恕我直言，使用它总是一个坏主意：

   e.preventDefault()
    e.stopImmediatePropagation();

你应该有一个解决办法。

我不知道您重复提交的原因可能是什么，但它可能来自 1/ $("#go").click 事件被注册了两次。也许检查一下。 2/ 正如 cmets 所说，你的 #go 是 type="submit.

解决方案：您可以在提交时停用按钮

 $("#go").click(function(e) {
$("#go").prop( "disabled", true )
$.ajax({
      type: "POST",
      url: "controllers/newcases_controller.php",
      data: $('#casedata').serialize(),
      success: function(response) {

    },
     complete:function(){
           $("#go").prop( "disabled", false)
    }
);
})

【讨论】：

那是我不明白的。我在我的登录页面上使用了相同的脚本，它正在工作。除非它也提交两次，否则我只是看不到它。这部分是我在其他问题上阅读的建议的一部分：e.preventDefault() e.stopImmediatePropagation();
我尝试了你的建议。按钮禁用并重定向，但仍提交两次。
我知道它建议其他帖子。但是，我认为您应该找到一种解决方法，因为有一天您将花费数天时间来理解为什么事件不会触发另一个函数。
检查你的控制台，如果事件监听器注册了两次

【解决方案2】：

感谢大家的帮助。我发现了问题..这最终是愚蠢的。当我运行后端代码时，我发现我正在执行 PHP PDO 执行语句两次。我已经修复了它，现在一切都按预期工作。 @stefdelec 建议查看事件是否注册了两次建议我发现它只发送一次，因此必须是其他东西而不是 JQUERY。

【讨论】：