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 调用发布数据，则不需要提交表单。

我希望这对你有用。

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