javascript - 替代 AJAX 异步 : false option for form submit button click event handler

Question

我有一个登录表单，在让登录表单继续提交之前，我们向服务器发出 AJAX 调用以执行一些验证。当前代码概述如下:

(function ($) {
    var errorMessageHtml = "";
    function isUserValid(username) {
        if (username.length <= 0) {
            return false;
        }
        var userIsValid = false;
        $.ajax({
            async: false,
            url: "/myAjaxCall?username=" + username
        }).success(function (validationResult) {
            userIsValid = validationResult.IsValid;
            errorMessageHtml = validationResult.ErrorMessage;
        }).fail(function () {
            errorMessageHtml = "Error contacting server. Please try again.";
        });

        return userIsValid;
    }

    var $usernameTextbox = $("#UserName");
    var $errorMessageLabel = $(".errorMessageContainer");

    $(".loginButton").on("click", function (e) {
        $errorMessageLabel.hide();
        if (isUserValid($usernameTextbox.val())) {
            return true;
        } else {
            $errorMessageLabel.show();
            $errorMessageLabel.html(errorMessageHtml);
        }
        e.preventDefault();
        return false;
    });
})(jQuery);

我知道 async: false 是不应该使用的东西，因为它已经过时了。我的问题是:还有什么选择。我的点击事件处理程序需要返回 true 或 false，这意味着它必须等待 ajax 调用完成。如果 async: false 不再是一个选项，那么 isUserValid 方法将立即返回，而无需正确设置 userIsValid bool。

现在我可以将 ajax 方法调用直接内联到在 $(".loginButton") 上调用的点击事件处理程序中，但是同样的问题出现了:它需要返回 true，或者防止默认(即防止登录)并根据 ajax 调用的结果返回 false。有没有一种方法可以强制单击事件处理程序在返回之前等待 ajax 调用的结果，而不使用 async: false？我知道有一个 jQuery when() 方法，但我不知道我是否可以在这种情况下使用它。

Answer 1

首先，无需单击相应的提交按钮即可提交表单。所以将 submit 事件绑定(bind)到 form。现在根据 ajax 请求结果，您可以提交 form，例如:

(function ($) {
    var errorMessageHtml = "";
    function isUserValid(username) {
        $errorMessageLabel.hide();
        if (username.length <= 0) {
            return false;
        }
        var userIsValid = false;
        // return the promise from ajax method
        return $.ajax({            
            url: "/myAjaxCall?username=" + username
        }).success(function (validationResult) {
            userIsValid = validationResult.IsValid;
            errorMessageHtml = validationResult.ErrorMessage;
        }).fail(function () {
            errorMessageHtml = "Error contacting server. Please try again.";
        });
    }

    var $usernameTextbox = $("#UserName");
    var $errorMessageLabel = $(".errorMessageContainer");
    // "form:has(.loginButton)" or whatever more relevant selector
    $("form:has(.loginButton)").on("submit", function (e) {
        $errorMessageLabel.hide();
        isUserValid($usernameTextbox.val())).always(function(validationResult ){
            if(validationResult && validationResult.IsValid) {
                this.submit();
            } else {
                $errorMessageLabel.html(errorMessageHtml).show();
            }
        }.bind(this));            

        e.preventDefault();
    });
})(jQuery);