Jquery Ajax双峰会

时间:2017-03-13 14:53:18

标签: jquery ajax post http-post double

我有这个问题,我的表单双重发布数据(通过单击在表中创建了2个条目)。我已经遵循stackoverflow的建议,似乎没有任何工作。问题可能是什么?我是一个使用AJAX的菜鸟所以我必须假设我做了一些愚蠢的事情

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

建议我尝试过:

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

jquery ajax form submits twice

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> 

建议下次尝试?

2 个答案:

答案 0 :(得分:0)

恕我直言,使用它总是一个坏主意:

   e.preventDefault()
    e.stopImmediatePropagation();

你应该有一个解决方法。

我不知道你的双重提交的起源是什么,但它可能来自 1 / $(“#go”)。点击事件已注册两次。也许检查一下。 2 /正如评论中所说,你的#go是一个类型=“提交。

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

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

答案 1 :(得分:0)

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