Question

在以下代码中，ajax调用有效并且isTaken已正确更新。但是return isTaken在ajax调用完成之前执行，因此它始终返回初始false设置。不推荐使用async = true，因此如何在返回正确更新的isTaken响应之前等待ajax调用完成？

    $.validator.addMethod("checkExists",
        function (value, element) {

            var email = $("#email").val();
            var data = {email: email};

            var isTaken = false;
            $.ajax({
                type: "POST",
                url: "http://localhost/CFBserver/check_email.php",
                data: data,
                success: function (response) {
                    isTaken = (response == 1) ? true : false;
                }
            });
            return isTaken;
        },
        "This username is already taken! Try another."
        );

Answer 1

为此使用jQuery.when()，等待传递的AJAX调用在完成回调函数之前完成。

$.validator.addMethod("checkExists",
    function (value, element) {

        var email = $("#email").val();
        var data = {email: email};

        $.when(
            return $.ajax({
                type: "POST",
                url: "http://localhost/CFBserver/check_email.php",
                data: data
            });
        ).done(function(response) {
            return response == 1; // returns true is response is 1, false otherwise
        });
    },
    "This username is already taken! Try another."
    );

我还通过根据你拥有的if语句返回布尔值来简化你的代码。

我会从你的函数中获取这个AJAX调用并将它作为一个独立的调用 - 这样代码看起来会更好，并且可以从其他地方调用。

$.when(checkMail).done(function(response) {
    return response == 1; // returns true is response is 1, false otherwise
});

// Outside of validator function...

function checkMail() {
     return $.ajax({
        type: "POST",
        url: "http://localhost/CFBserver/check_email.php",
        data: data
    });
}

此外，您是否还希望处理AJAX调用中的错误，使用then而不是done并提供两个函数作为回调：一个用于成功，一个用于失败：

$.when(checkMail).then(function(response) {
    // Function gets called as 'success' from AJAX
    return response == 1;
}, function (errorResponse) {
    // Function gets called as 'error' from AJAX
    // return false; // or
    // return "Error when checking email: " + errorResponse;
});

带有ajax计时问题的jquery验证器

1 个答案: