问题描述:

I'm hoping this is just a simple fix due to me being a little dumb somewhere along the line. I'm executing my ASP.NET MVC login using AJAX. There is a "success" handler which returns a "true" value to the calling function which, in turn, load the home page.

The issue is that the "success" handler is executing BEFORE any value is returned - which means that nothing happens because the value is not "SUCCESS". I can confirm this by looking at the request in Firebug, the value returned is SUCCESS but nothing happens. If I apply a breakpoint to the end of the function and then continue execution it works just fine.

I have no idea what the issue is, I'd be very grateful for help or an explanation to what I'm doing wrong.

Thanks!

My JS Function:

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;

}

UPDATE: The function that calls the LogIn function:

$('#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.");

}

})

As I said, the function does it's job and logs me in, but the "success" handler seems to execute before the value is returned.

网友答案:

Change your ajax call to something like this:

$.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.");
        }
    }
});

There is no point in returning result from LogIn, it'll always be false. You need to put the code handling the returned value in the callback.

Another alternative, if you don't like the idea of your LogIn function being so closely coupled to DOM manipulation is to return the promise from your ajax call. So at the end of LogIn, you'd do something like this:

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

And then when you call it, you'd do something like this:

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.");
    }
});
相关阅读:
Top