jquery ajax调用未按预期返回

Question

I'm unsure why this jquery ajax call is failing. Basically, I want to authenticate and if the authentication is a success, do something.

I found this but the answer seems to abbreviated to be much use to me (is assumes you already know how to implement the solution). jQuery ajax return value

Here is my ajax call (I have stripped the fluff for getting the username/password):

function authenticate() {
    $.ajax({  //TODO: Securely send this (ssl?)
        type: 'POST',
        url: 'includes/clientAuthenticate.php',
        data: { username: username, password:  password},
        success:function(data){
            if(data==='true') {
                return "true";
            } else {
                return "User failed to log into the system.\nEmail request ignored.\n\nError message: \n" + data;
            }
        },
        error:function(jqXHR, textStatus, errorThrown){
            return "User failed to log into the system. Potential problem with server or connection.";
        }
    });

And I call it in this function:

function attemptEventSubmit(eKey) {
    var authReturn = authenticate();
    if(authReturn=="true") {
        emailEvent(eKey);
    } else {
        alert(authReturn);
    }
}

When it returns, it always alerts that authReturn is "undefined". I suspect it's defining authReturn as undefined because the authenticate function 'finishes' before the ajax call gets back...

But I'm not sure how to fix this problem.

I suspect I could call separate instead of returning values... (say, in this example, calling the emailEvent function directly in the ajax success function) but that would make the authenticate function specific... and it'd no longer be able to be used for authenticating for other purposes.

Answer 1

You can use your code but will need a callback. A better way would be look into promises.

function authenticate(onsuccess, onfail) {
    $.ajax({  //TODO: Securely send this (ssl?)
        type: 'POST',
        url: 'includes/clientAuthenticate.php',
        data: { username: username, password:  password},
        success:function(data){
            onsuccess(data); // you should check if this is a function
        },
        error:function(jqXHR, textStatus, errorThrown){
            onfail(errorThrown);
        }
    });

function attemptEventSubmit(eKey) {
    authenticate(
        function(ajaxData){
            emailEvent('whatever you want to send');
        },
        function(errThrown){
            alert(errThrown);
        });
}

Answer 2

How about pass in a callback function as another argument of the function authenticate().

So the code changes will be

function authenticate(callback) {
    $.ajax({  //TODO: Securely send this (ssl?)
        type: 'POST',
        url: 'includes/clientAuthenticate.php',
        data: { username: username, password:  password},
        success:function(data){
            if(data==='true') {
                //return "true";
                callback("true");
            } else {
                //return "User failed to log into the system.\nEmail request ignored.\n\nError message: \n" + data;
                callback("User failed to log into the system.\nEmail request ignored.\n\nError message: \n" + data);
            }
        },
        error:function(jqXHR, textStatus, errorThrown){
            //return "User failed to log into the system. Potential problem with server or connection.";
            callback("User failed to log into the system. Potential problem with server or connection.");
        }
    });

Calling the function authenticate will become:

function attemptEventSubmit(eKey) {
    authenticate(function(authReturn){
        if(authReturn=="true") {
             emailEvent(eKey);
        } else {
             alert(authReturn);
        }
    });

}