jQuery Ajax 多次提交表单答案

【问题标题】：jQuery Ajax submitting form multiple timesjQuery Ajax 多次提交表单
【发布时间】：2020-02-27 04:20:46
【问题描述】：

我是阿贾克斯的新手。我目前正在使用 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() 但仍然没有结果

【问题讨论】：

你有多个.btn-success按钮吗？
整页没有一个按钮。
不要将事件处理程序放在另一个事件处理程序中。每次单击时，您都会添加另一个提交处理程序。我
@SAMUEL 请e.stopImmediatePropagation() 处理按钮事件而不是表单提交事件 $(document).on('click','.btn-success', function(event){ event. preventDefault(); event.stopImmediatePropagation(); });
@SAMUEL，您能否澄清一下在具有相同类名的表单中是否有隐藏按钮？当您第一次点击或后续调用时，您是否看到表单被多次提交？

标签： javascript jquery ajax forms

【解决方案1】：

我看到表单提交和 Ajax 调用都在做同样的工作。如果您打算仅通过 AJAX 调用发布数据，则不需要提交表单。

我希望这对你有用。


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

【讨论】：

谢谢你 @prasana kannan
很高兴我能帮助你@SAMUEL

【解决方案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;
  });
});

【讨论】：

我已经尝试过使用你的方法，但它不起作用相同的数据多次进入数据库