jQuery Ajax отправка формы несколько раз

Question

Я новичок в Ajax. В настоящее время я отправляю форму в свою базу данных, используя jQuery AJAX, но она отправляет одни и те же данные несколько раз в моей базе данных.

Вот мой Ajax код:

$(document).ready(function () {
    var id_js;

    $(document).on('click', '.btn-success', function () {
        id_js = $('#ID_TXT').val();
        $('form').submit(function (e) {
            e.preventDefault();
            e.stopImmediatePropagation();
            $.ajax({
                type: "POST",
                url: 'server.php',
                data: {
                    'Mark': 1,
                    'id': id_js,
                },
                success: function (response) {
                    $('#result').html(response);
                }
            });

            return false;
        });
    });
});

Также я пробовал .one() и .stopImmediatePropogation(), но до сих пор нет результатов

Answer 1

Я вижу, как отправка формы и Ajax вызов выполняют одинаковую работу. Если вы собираетесь публиковать данные только с помощью AJAX call, отправка формы не требуется.

Надеюсь, это хорошо сработает для вас.

$(document).ready(function () {
    function postDataToServer() {
        var id_js = $('#ID_TXT').val();

        $.ajax({
            type: "POST",
            url: 'server.php',
            data: {
                'Mark': 1,
                'id': id_js,
            },
            success: function (response) {
                $('#result').html(response);
            }
        });       
    }

    $(document).on('click', '.btn-success', postDataToServer);
});

Answer 2

Обработчик отправки не должен быть внутри обработчика щелчка. Каждый раз, когда вы нажимаете на кнопку, он добавляет еще один обработчик отправки. Поэтому, когда вы, наконец, отправите форму, она отправит ее столько раз, сколько вы нажали кнопку.

Если вы хотите убедиться, что форма не отправлена, пока вы не нажмете кнопку, добавьте тест в обработчике отправки.

$(document).ready(function() {
  var id_js;

  $(document).on('click', '.btn-success', function() {
    id_js = $('#ID_TXT').val();
  });

  $('form').submit(function(e) {
    if (id_js !== undefined) {
      $.ajax({
        type: "POST",
        url: 'server.php',
        data: {
          'Mark': 1,
          'id': id_js,
        },
        success: function(response) {
          $('#result').html(response);
        }
      });
    } else {
      alert("You need to click on the success button first");
    }

    return false;
  });
});