Question

我有一个表单，我通过jQuery捕获并通过AJAX发送。我的问题是每次刷新页面时表单都会提交多次。

我试图取消绑定提交按钮，但是在首次提交后，表单会正常发布。任何帮助将不胜感激

$('#exportForm').submit(function() {
  $.ajax({
    type: "POST",
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(response) {
      $('#exportForm').unbind('submit');
      console.log(response);
    }
  });
  return false;
});

Answer 1

除了调用preventDefault之外，还可以在事件上调用stopImmediatePropagation。

$('#exportForm').submit(function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    $.ajax({
        type: "POST",
        url: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( response ) {
            console.log( response );
        }
    });

    return false;
});

Answer 2

您最有可能使用button或submit来触发ajax事件。试试这个：

$('#exportForm').submit(function(e){
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: $(this).attr( 'action' ),
            data: $(this).serialize(),
            success: function( response ) {
                console.log( response );
            }
        });

        return false;
    });

Answer 3

您只需使用e.stopImmediatePropagation();：

即可

例如：

$('#exportForm').submit(function(e){
    e.stopImmediatePropagation();

Answer 4

通过在php表单上使用div代替按钮可以解决问题。由于使用了ajax，因此不需要按钮。

Answer 5

正如Chris Sercombe指出的那样，e.stopImmediatePropagation（）确实有效，它确实解决了问题，但你不应该使用它。问题仍存在于您的代码中。让我举一个如何发送两个帖子请求的例子：

如果您正在使用AngularJS，并且假设您创建了一个名为＆＃34; HandleAjaxController＆＃34;您可以将此ng-controller分配给div，然后意外地将同一ng-controller分配给内部div。这将导致发送请求两次发送。所以：

    <div ng-controller='HandleAjaxController'>
        <div ng-controller='HandleAjaxController'>
            <button id="home" type="button" class="btn btn-success">Send data</button>

这给我带来了很多压力，因为在我的ng-route中我已将控制器设置在这里：

    $routeProvider
    .when("/", {
        templateUrl : "src/js/partials/home.html",
        controller : "HandleAjaxController"
    })

然后我在home.html中再次设置它：<div ng-controller='HandleAjaxController'>

无论如何，这是如何发送两个帖子的一个例子。

Answer 6

我已经在这里回答了jquery.unobtrusive-ajax.min.js ref两次https://stackoverflow.com/a/15041642/4412545

Answer 7

您应该检查另一个js代码，也许在某个地方它会触发两次“提交”事件。就我而言，这种情况发生了，我忘记了onclick处理程序中的“ return false”一个按钮

Answer 8

对于几乎有相同问题的人，我可以说您应该将jQuery事件控制在远离function（）{}的位置，因此，最好仅从ajax POST发出一个请求就是发生如下事件：

$(document).ready(function {
 $("#exportForm").click(function{
   $.ajax({
      type: "POST",
      url: "#", //your url
      data: data, //your variable
      success: function(){
        //do something here
      }
   });
 });
});

不在功能中，它会引起如下第二个功能：

$(document).ready(function {
 exportingForm();

 function exportingForm(){
   $("#exportForm").click(function{
     $.ajax({
        type: "POST",
        url: "#", //your url
        data: data, //your variable
        success: function(){
          //do something here
        }
     });
   });
 }
});

Answer 9

只是要指出，如果您有多个具有相同类的元素，那么这也可能发生。

<button class="downvote">
  <img src="/img/thumbs-down.png" class="downvote">
</button>

jQuery AJAX表单提交两次

9 个答案: