2

它是jQuery。

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

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

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

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

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

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

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

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

6 回答 6

6

无论您做什么都不要在 AJAX 调用中使用async: false，特别是因为您的请求非常长（15 秒）。它将禁用所有Javascript，直到 AJAX 调用完成。

你这样做的方式很好。您可以使用 jQuery 的全局 AJAX 事件处理程序对其进行概括。给每个相关的输入控件一个适当的标记类，如“ajax”：

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

和：

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

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

于 2010-02-04T09:27:21.053 回答
3

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

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

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

于 2010-02-04T09:26:48.730 回答
1

看看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();
                }
            });
于 2010-02-04T11:02:17.107 回答
0

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

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

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

于 2010-02-04T09:22:14.947 回答
0

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

当Ajax调用结束时，我关闭模式窗口。

我希望它有所帮助。

于 2010-02-04T09:27:34.857 回答
-1

输入按钮：

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

js代码：

var onAjax = 假；
函数 ajaxCheck(){
  如果（onAjax）
    返回假；
  别的
    返回真；
}


$("元素").onblur(函数(){
  onAjax = 真；
  //你需要在这里做什么
  $.ajax({
    //标准参数
    成功：函数（）{
      onAjax = 假；
    },
    失败：函数（）{
      onAjax = 假；
    }
  });
});
于 2010-02-04T09:27:38.320 回答