替代AJAX async：表單提交按鈕單擊事件處理程序的false選項

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是不應該使用的東西，因為它已經過時了。 我的問題是：替代方案是什么。 我的click事件處理程序需要返回true或false，這意味着它必須等待ajax調用完成。 如果async: false不再是一個選項，那么isUserValid方法將立即返回而不正確設置userIsValid bool。

現在我可以將ajax方法調用直接內聯到$(".loginButton")上調用的click事件處理程序，但同樣的問題出現了：它需要返回true，或者防止默認（即阻止登錄）並返回false取決於ajax調用的結果。 有沒有辦法可以強制click事件處理程序在返回之前等待ajax調用的結果，而不使用async: false ？ 我知道有一個jQuery when()方法，但我不知道我是否可以在這種情況下使用它。

Answer 1

第一件事情，一個form可以不點擊相應的按鈕提交所需提交。 所以綁定而不是submit事件submit給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);

Answer 2

答：Wolff的回答是我接受的答案，但我想根據他們的輸入以及來回的各種評論分享我的最終代碼解決方案。

(function ($) {
    "use strict";

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

    $("form").on("submit", function (e) {
        $errorMessageLabel.hide();
        var username = $usernameTextbox.val();
        if (username.length <= 0 || $passwordTextbox.val().length <= 0) {
            return; // Server posts back with "username/password required" so we don't handle it here.
        }

        $.get("/myAjaxCall?username=" + username).done(function (validationResult) {
            if (validationResult.IsValid) {
                this.submit();
            } else {
                $errorMessageLabel.html(validationResult.ErrorMessage).show();
            }
        }.bind(this)).fail(function() {
            $errorMessageLabel.html("Error contacting server. Please try again.").show();
        });            

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