jquery ajax call sucess and then

Question

So for JQuery Ajax call we can do something like below

function checkUserName() {

var flag=false;

$.ajax({
    type : "get",
    url : "/vclub/verify/checkUserName.do",
    data : {lastName: "jason"},
    success : function(data) {
        if (data) {
            alert("flag now true");
            flag=true;
        } 
    }
 });

alert(flag);
return flag;
}

And flag never becomes true.

I searched the forum and been told to use callback functions.

Why can I not use success function (which I believe that success function called after success ajax response??) to assign flag variable?

What's the difference between "THEN()" and "Success function"?

To me both of them seems about the same.

What am I missing?

Thank you. Again Thank you for sharing your knowledge.

But what is the diff between Then and Success?

Santiago Hernández · Accepted Answer · 2015-02-19T03:22:10.673

The problem in your code is this:

$.ajax Description: Perform an asynchronous HTTP (Ajax) request

so, the code is read by the browser, and then is executed. By the time your alert(flag) is executed your flag is unassigned. And after the http request is complete the success callback is called BUT it is not executing the code after the $.ajax() call by second time.

That's why you must place the code you need to be executed inside the $.ajax() callbacks or call the functions you need to call inside them

To fix your code, move the alert() inside the success callback

function checkUserName() {

var flag=false;

$.ajax({
    type : "get",
    url : "/vclub/verify/checkUserName.do",
    data : {lastName: "jason"},
    success : function(data) {
        if (data) {
            alert("flag now true");
            flag=true;
            alert(flag);
        } 
    }
 });

return flag;
}

One important thing is that the code inside success may never be executed, it will be executed only is the request returns a 200 status code. Thats why we have the other callbacks: error, complete, etc.

EDIT: To answer "what is the diff between Then and Success?" let's see the .then description:

deferred.then() Description: Add handlers to be called when the Deferred object is resolved, rejected, or still in progress

so the main difference is that success callback is only called when the http request is finished and received an 200 status code, but the then function in this context is used to add callback handlers to the jqXHR object, example

$.get( "test.php" ).then(
  function() {
    //ajax complete equivalent callback here
  }, function() {
    //ajax error equivalent callback here
  }
);

Good summary. One other statement that might help convey the idea; JavaScript only has one function that "waits" a non-zero amount of time for an action to complete before executing the next line of code; `alert()`. Otherwise, ajax functions, HTML-based dialogs, and such, will *basically* complete whatever they need to get started instantaneously and run the next line. This is important for JavaScript because browsers are running it in the UI thread, and anything that *would* make a function take significantly longer would cause lock-ups for the user. — Katana314, Feb 19 '15 at 02:55

score 1 · Answer 2 · answered Feb 19 '15 at 02:44

You're setting flag=true inside the success callback in your AJAX call. To fix this, simply move the actions you plan on completing inside the success callback, or give it a new one:

function checkUserName(callback) {
    $.ajax({
        type : "get",
        url : "/vclub/verify/checkUserName.do",
        data : {lastName: "jason"},
        success : callback
     });
}

checkUserName(function(data) {
    console.log(data);
    alert("Done!");
});

jquery ajax call sucess and then

2 Answers2