How to get the value of variable assigned in $.ajax() function?

Question

Here is my code. I want to get the "flag", but the "flag" is always "false". Even program executes to "flag=true", the "flag" becomes "false" when it's returned. How can I get the real value from $.ajax()? Please help me. Thanks

function checkUserName() {
var name = document.getElementById("userName").value;
var namemsg = document.getElementById("userNameMsg");
var flag=false;
if (name == "") {
    flag=false;
} else {
    $.ajax({
        type : "POST",
        url : "/vclub/verify/checkUserName.do",
        dataType : "json",
        data : "userName=" + name,
        success : function(data) {
            if (data == true) {
                flag=true;
            } else {
                flag=false;
            }
        }
    });
}
alert(flag);
return flag;

}

Answer 1

Since AJAX is asynchronous, you need to use a callback. At the moment you receive the AJAX response after you return flag at the end of your code. The key point is that success is not called before return flag , since the anonymous function attached to success is called only when the response is received from the url . Note that since you may or may not run an AJAX request, you still need to use a callback function when you can provide the return instantly (if the name is an empty string). In this case, the callback will be executed shortly after flag is set to false. Otherwise, the checkUserName will likely complete before the AJAX returns.

function checkUserName(callback) {
    var name = document.getElementById("userName").value;
    var namemsg = document.getElementById("userNameMsg");
    var flag=false;
    if (name == "") {
        // Note a callback is needed even if we don't use AJAX (because we might)
        flag=false;
        callback(flag);
    } else {
        $.ajax({
            type : "POST",
            url : "/vclub/verify/checkUserName.do",
            dataType : "json",
            data : "userName=" + name,
            success : function(data) {
                if (data == true) {
                    flag=true;
                } else {
                    flag=false;
                }
                callback(flag);
            }
        });
    }
}

How to use:

checkUserName(function (flag) {
    // Here, the flag variable is available, but will not run until "callback" is called above
    alert(flag);
});

Answer 2

The flag 's value will change when the AJAX request finishes successfully, because the function that you assigned to success attribute of $.ajax function is a callback. In fact your alert(flag); line of code will run before execution of success callback (When flag 's value is not changed yet).

If you move alert(flag); to the success callback, you will see it's value is changed.

I think you need to move callback(); line to the function too.

Answer 3

put the async:false ,

function loadProcess(processId) {
    var prc;
    $.ajax({
        async: false,
        url: '/processes/getprocess',
        data: {
            'id': processId
        },
        success(result) {
            prc = result;
        },
        error(xhr) { alert(xhr.responseText); }
    });
    return prc;
}