Question

我有一个注册表格。在域文本框字段中，人们填写域名，然后onblur Ajax调用registar API以验证域可用性。

根据网络速度的不同，验证最多可能需要15秒。

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

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

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

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

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

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

Answer 1

无论你做什么不在你的AJAX调用上使用async: false，特别是因为你的请求是如此长寿（15秒）。它将禁用所有 Javascript，直到AJAX调用完成。

你做这件事的方式很好。您可以使用jQuery的global AJAX event handlers来概括它。为每个相关的输入控件提供一个合适的标记类，如“ajax”：

<input type="button" class="ajax" value="Register Domain">

使用：

$(document).ajaxStart(function() {
  $(".ajax").attr("disabled", true);
}).ajaxComplete(function() {
  $(".ajax").removeAttr("disabled");
});

所以你在这里正在做的是听全局AJAX事件，当他们正在进行时你禁用所有在AJAX调用正在进行时你不想被点击的控件。

Answer 2

将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');
            }
        });
    });
});

这样，用户无法以任何其他方式提交表单。如果您只禁用提交按钮，则可以使用回车键提交表单（不确定）。使用一个告知验证是否正在运行的变量是防止意外提交的可靠方法。

Answer 3

查看BlockUi。

这很容易实现。您可以使用处理类型消息来阻止元素甚至整个页面，以便用户知道正在发生的事情。然后你只需在你的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();
                }
            });

Answer 4

无论你最后怎么做，一定要在验证时显示一些进度指示器。

如果用户填写了每个表单元素，之后无法按下submit按钮（因为验证过程仍在运行），他/她会非常困惑。

15秒是很长一段时间，所以请确保用户知道发生了什么。

Answer 5

我自己经历过这种情况。我的方法是打开一个带有WIF和一些解释性文字的小模态窗口。

当Ajax来电结束时，我会关闭模态窗口。

我希望它有所帮助。

Answer 6

输入按钮：

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

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

6 个答案: