jQuery是在等待Ajax完成时阻止任何其他进程的最佳方法

是的

我有一张报名表。在域文本框字段，人们填写域，然后onblur调用registarapi验证域的可用性

验证可能需要15秒，具体取决于网络速度

在此等待期间，如果用户点击提交按钮，如何阻止

我的想法很简单：在任何Ajax调用完成加载之前，我不想让人们单击submit

我可以想出一个办法，但我不确定这是否是一个好办法。我需要建议

beforeSend: function(){
    $("#btnSubmit").attr("disabled", "disabled");
},

complete: function(){
    $("#btnSubmit").attr("disabled", "");
}

<input type="button" name="btnSubmit" id="btnSubmit" value="my button" />

beforeSend:function（）{
$（“#btnSubmit”）.attr（“禁用”、“禁用”）；
},
完成：函数（）{
$（“#btnSubmit”）.attr（“已禁用”、“已提交”）；
}

无论最后如何操作，在验证过程中一定要显示一些进度指标

如果用户填写了每个表单元素，并且之后无法按

submit

按钮（因为验证过程仍在运行），他/她会感到非常困惑

---

15秒是很长的时间，因此请确保用户知道发生了什么。

将

async

设置为

false

可能会起作用，但这可能会使浏览器完全挂起15秒。最好是禁用submit元素，并使用存储验证是否正在进行的变量以其他方式阻止提交：

var validating = false;

$(function() {

    $('form').submit(function() {
        if(validating) return false;
        var button = $(this).find('input:submit, input:button');

        button.attr('disabled', 'disabled');
        validating = true;

        $.ajax({
            url: 'validator.php',
            data: $(this).serialize(),
            success: function() {
                validating = false;
                button.removeAttr('disabled');
            }
        });
    });
});

---

这样，用户就不能以任何其他方式提交表单。如果只禁用“提交”按钮，则可以使用enter键提交表单（对此不确定）。使用告知验证是否正在运行的变量是防止意外提交的可靠方法。

无论您做什么，都不要在AJAX调用中使用

async:false

，特别是因为您的请求非常长（15秒）。它将禁用所有Javascript，直到AJAX调用完成

你这样做很好。您可以使用jQuery的。为每个相关的输入控件提供一个适当的标记类，如“ajax”：

---

因此，您在这里所做的是监听全局AJAX事件，当它们正在进行时，您将禁用所有不希望在AJAX调用进行时被单击的控件。

我自己也经历过这种情况。我的方法是打开一个带有哀号GIF和一些解释性文本的小模式窗口

当通话结束时，我关闭模式窗口

我希望它有帮助。

输入按钮：

<input typ="submit" value="Register" onsubmit="return ajaxCheck();" /> Js代码：

var onAjax = false; function ajaxCheck(){ if(onAjax) return false; else return true; } $("element").onblur(function(){ onAjax = true; //whatever you need to do here $.ajax({ //standard params success: function(){ onAjax = false; }, failure: function(){ onAjax = false; } }); }); var-onAjax=false； 函数ajaxCheck（）{ if（onAjax） 返回false； 其他的 返回true； } $（“元素”）.onblur（函数（）{ onAjax=true； //你在这里需要做什么 $.ajax({ //标准参数 成功：函数（）{ onAjax=false； }, 失败：函数（）{ onAjax=false； } }); }); 看一看

它很容易实现。您可以使用处理类型消息阻止元素，甚至整个页面，以便用户知道正在发生什么。然后，您只需在ajax调用完成时取消阻止它

一个我用过的例子

$('#elementtobloack').block({
        centerY: 0,
        message: 'Some useful message'       
    });

 $.ajax(
            {
                type: "POST",
                url: "...",
                data: "{}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //do something
                    //unblock your element 
                    $('#elementtoblock').unblock();
                },
                error: function(msg) {
                    //do something on error -- alert(msg.responseText);
                    //unblock on failure as well or the element will remain blocked
                    $('#elementtobloak').unblock();
                }
            });     

---

哦，是的，在读了15秒之后。。。改变了我的答案；）在jQuery中使用绑定而不是

onclick

属性-将表示和行为分开。。。。在等待AJAX完成的同时，不要忘了给用户一些关于正在发生的事情的反馈。 var onAjax = false; function ajaxCheck(){ if(onAjax) return false; else return true; } $("element").onblur(function(){ onAjax = true; //whatever you need to do here $.ajax({ //standard params success: function(){ onAjax = false; }, failure: function(){ onAjax = false; } }); });

$('#elementtobloack').block({
        centerY: 0,
        message: 'Some useful message'       
    });

 $.ajax(
            {
                type: "POST",
                url: "...",
                data: "{}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //do something
                    //unblock your element 
                    $('#elementtoblock').unblock();
                },
                error: function(msg) {
                    //do something on error -- alert(msg.responseText);
                    //unblock on failure as well or the element will remain blocked
                    $('#elementtobloak').unblock();
                }
            });