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调用之前禁用提交按钮。然后，如果需要，请在成功时启用它。

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

5 个答案: