Форма jQuery AJAX отправляется дважды

У меня есть форма, которую я собираю через 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;
});

Ответ 1

Скорее всего, вы используете 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;
    });

Ответ 2

Помимо вызова функции 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;
});

Ответ 3

Если вы используете какую-то проверку (например, проверку jQuery), форма отправляется дважды, потому что помимо $('#exportForm').submit вы пишете себя, плагин проверки также отправит форму после того, как она успешно проверит все поля.

Примечание. Если вы используете проверку jQuery, не используйте .submit(). Вместо этого используйте submitHandler.

Ответ 4

Вы можете просто использовать e.stopImmediatePropagation();:

Например:

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

Ответ 5

Как отметил Крис Серкомб, e.stopImmediatePropagation() действительно работает, и это определенно устраняет проблему, но вам не нужно ее использовать. Проблема все еще существует в вашем коде. Позвольте мне упомянуть пример того, как можно отправить два почтовых запроса:

Если вы используете AngularJS и можете сказать, что вы создали контроллер под названием "HandleAjaxController", вы можете назначить этот ng-контроллер на div, а затем случайно присвоить этому же ng-контроллеру внутренний div. Это приведет к отправке почтового запроса дважды. Итак:

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

Это вызвало большой стресс для меня один раз, потому что на моем маршруте я установил здесь контроллер:

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

а затем я снова установил его в home.html: <div ng-controller='HandleAjaxController'>

В любом случае, это один пример того, как можно отправить два сообщения.

Ответ 6

Я добавил jquery.unobtrusive-ajax.min.js ref дважды в качестве ответа здесь fooobar.com/questions/188125/...

Ответ 7

Вы должны проверить свой другой js-код, возможно, где-то он дважды вызывает событие "submit". Это произошло в моем случае, я забыл "вернуть ложь" в обработчике onclick для одной кнопки

Ответ 8

Для тех, у кого почти такая же проблема, я могу сказать, что вы должны управлять своими событиями jQuery вне функции() {}, поэтому лучше всего иметь только один запрос от 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
        }
     });
   });
 }
});

Ответ 9

Просто хочу указать, что если у вас более одного элемента с одним и тем же классом, это также может произойти.

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

Ответ 10

Проблема может быть решена с помощью div вместо кнопки в вашей php-форме. Использование кнопки ajax не требуется.