javascript - AJAX "success"在返回响应之前执行

Question

我希望这只是一个简单的修复，因为我在某个地方有点愚蠢。我正在使用 AJAX 执行 ASP.NET MVC 登录。有一个“成功”处理程序，它向调用函数返回“true”值，而调用函数又加载主页。

问题是“成功”处理程序在返回任何值之前执行 - 这意味着什么也没有发生，因为该值不是“SUCCESS”。我可以通过查看 Firebug 中的请求来确认这一点，返回的值是 SUCCESS 但没有任何反应。如果我在函数末尾应用断点，然后继续执行，它就可以正常工作。

我不知道问题是什么，我将非常感谢您的帮助或对我做错了什么的解释。

谢谢!

我的 JS 函数:

function LogIn(UserName, Password) {
var Cont = true;
var ErrorString = "";
if (UserName == null || UserName == "") {
    Cont = false;
    ErrorString += "Username is Required.";
}
if (Password == null || Password == "") {
    Cont = false;
    ErrorString += "Password is Required.";
}

var result = false;

if (Cont) {
    var LogInUrl = "/AJAX/LogIn?UserName=" + UserName + "&Password=" + Password;
    $.ajax({
        url: LogInUrl,
        type:"GET",
        success: function( data ){
            if (data == "SUCCESS") {
                result = true;
            }
        }
    })
}

return result;

}

更新:调用LogIn函数的函数:

$('#FormLogin').submit(function (e) {
    e.preventDefault();
    var UserName = $("#TxtLoginUsername").val();
    var Password = $("#TxtLoginPassword").val();
    var IsLoggedIn = LogIn(UserName, Password);
    if (IsLoggedIn) {
        window.location.assign("/");
    } else {
        $('#LoginErrorContainer').show();
        $('#LoginErrorContainer .error-text').html("There was a problem logging you in. Please try again.");
    }
})

正如我所说，该函数完成了它的工作并让我登录，但“成功”处理程序似乎在返回值之前执行。

Answer 1

将您的 ajax 调用更改为如下所示:

$.ajax({
    url: LogInUrl,
    type:"GET",
    success: function( data ){
        if (data == "SUCCESS") {
            window.location.assign("/");
        } else {
            $('#LoginErrorContainer').show();
            $('#LoginErrorContainer .error-text').html("There was a problem logging you in. Please try again.");
        }
    }
});

从 LogIn 返回 result 是没有意义的，它总是错误的。您需要将处理返回值的代码放在回调中。

如果您不喜欢 LogIn 函数与 DOM 操作如此紧密地结合在一起，另一种选择是从 ajax 调用中返回 Promise。因此，在 LogIn 结束时，您需要执行以下操作:

return $.ajax({
    url: LogInUrl,
    type:"GET"
    }
});

然后当你调用它时，你会做这样的事情:

LogIn(UserName, Password).then(function(data) {
    if (data == "SUCCESS") {
        window.location.assign("/");
    } else {
        $('#LoginErrorContainer').show();
        $('#LoginErrorContainer .error-text').html("There was a problem logging you in. Please try again.");
    }
});