javascript - 确保 ajax 请求不会被多次触发

Question

我正在处理一个简单的表单页面，我想知道如果有人多次单击提交按钮会发生什么（以防我的共享主机当时似乎很慢）。

另外，如果有人想看我的代码

$.ajax({
    url: "submit.php",
    type: 'POST',
    data: form,
    success: function (msg) {
        $(".ressult").html("Thank You!");
    },
    error: function () {
        $(".result").html("Error");
    }
});

有没有办法让它在用户点击一次后，在第一次点击完成之前不会再次运行它？

谢谢

Answer 1

您可以使用 jQuery 的.one()函数：

(function handleSubmit() {
    $('#submitBtn').one('click', function() {
        var $result = $('.result');
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: form,
            success: function (msg) {
                $result.html('Thank You!');
                handleSubmit(); // re-bind once.
            },
            error: function () {
                $result.html('Error');
            }
        }); // End ajax()
    }); // End one(click)
}()); // End self-invoked handleSubmit()

*编辑： *添加了多次提交的递归。

Answer 2

使用布尔标志

 if (window.isRunning) return;
 window.isRunning = true;
 $.ajax({
            url:"submit.php",
            type: 'POST',
            data: form,
            success: function (msg){                
                $(".ressult").html("Thank You!");
            },
            error: function (){
                $(".result").html("Error");
            },
            complete : function () {
                window.isRunning = false;
            }
        });

Answer 3

var $button = $(this);
$button.prop('disabled', true); // disable the button
$.ajax({
    url:"submit.php",
    type: 'POST',
    data: form,
    success: function (msg){                
        $(".ressult").html("Thank You!");
    },
    error: function (){
        $(".result").html("Error");
    },
    complete: function() {
        $button.prop('disabled', false); // enable it again
    }
});

Answer 4

您是否考虑过在查询执行时用加载器图像替换您的提交按钮，然后在查询完成后重新添加它？

编辑：使用加载器图像是一种通用的“我正在做某事”指示器，但禁用按钮也可以！

Answer 5

您可以在进行 ajax 调用之前禁用提交按钮。然后，如果需要，在成功时启用它。