How to return the result from a AJAX request

Question

Today I'm creating a Javascript function called "sendData".

This is used for ease, instead of writing out a whole ajax statement.

Anyway I know it's asynchronous, I was wondering how I could wait and get the value returned instead of returning nothing. Here is what I have.

   function returnData(data)
{
    alert(data + " ddd");
    return data;
}

function sendData(data,file) {
    var a = ""
    $.ajax({
        url: file,
        data: data,
        type: "POST",
        success: function(newData)
        {
            a = newData;

        }
    })
    returnData(a);
}

I thought this would work, but it doesn't. Does anyone know how I can wait for it to return or something?

Final Code

function sendData(data,file) {
    var a = ""
    $.ajax({
        url: file,
        data: data,
        type: "POST",
        async:false,
        success: function(newData)
        {
            a = newData;
        }
    })
    return a;
}

No reason to feel bad, duplicates are a part of the site. If it gets marked as one, it will just help point future searchers to another question/answer combination that is incredibly detailed. ^^ (Nice answer on that Duplicate though @FelixKling =]) — Jon, Apr 22 '13 at 22:51

score 3 · Accepted Answer · answered Apr 22 '13 at 22:34

3

Well, if you want to keep it asynchronous, call your function within your success, ie:

function returnData(data)
{
    alert(data + " ddd");
    return data;
}

function sendData(data,file) {
    var a = ""
    $.ajax({
        url: file,
        data: data,
        type: "POST",
        success: function(newData)
        {
            returnData(newData);
        }
    })
}

This way your function won't be called until you have something to send to it. Otherwise, set it so that it waits for a response before continuing with async:false, in your parameters.

answered Apr 22 '13 at 22:34

Jon

4,746
2
24
37

This doesn't work. Data returns as undefined. – Jordan Schnur Apr 22 '13 at 22:38
2

Ahh, you must be expecting a return from `sendData` then, which is why it would return undefined. If you want that function to have a return, you'd need to set `async:false` in the settings so the entire function will wait for the return. Otherwise, you can call your `returnData` function and it can continue where you left off when you called `sendData` – Jon Apr 22 '13 at 22:41
No problem. ^^ Happy to help. – Jon Apr 22 '13 at 22:46

score 2 · Answer 2 · answered Apr 22 '13 at 22:32

2

If you set the option async:false it will wait for the callback to return.

$.ajax({
    ...
    async:false,
    ...
})

answered Apr 22 '13 at 22:32

Bart

17,070
5
61
80

keep in mind that it'll delay execution of all javascript code that occurs after `sendData(...)` call until the AJAX (_SJAX_ in this case) call has completed. – Ejaz Apr 22 '13 at 22:42
2

This has the disadvantage of locking the browser while the synchronous call is being executed, and it's usually a big no-no and should be avoided like the plague. You will be better of by simply waiting for the call to finish before trying to use the returned data. – adeneo Apr 22 '13 at 22:44

score 2 · Answer 3 · answered Apr 22 '13 at 22:33

2

You can also do:

function sendData(data,file) {
    var a = ""
    $.ajax({
        url: file,
        data: data,
        type: "POST",
        success: function(newData)
        {
            returnData(newData);

        }
    })
}

This is the typical way callbacks are used. The success function is the code that should be executed upon success.

You might also want to look into promises: http://api.jquery.com/promise/

answered Apr 22 '13 at 22:33

Jonah

15,806
22
87
161

Yea the above doesn't work. – Jordan Schnur Apr 22 '13 at 22:37

score 2 · Answer 4 · answered Apr 22 '13 at 22:37

might just use?

         function sendData(data,file) {
           var a = ""
           $.ajax({
              url: file,
              data: data,
              type: "POST",
              success: function (newData) {
                 a = newData;
                 returnData(a);

              }
           })
           return;
        }

How to return the result from a AJAX request

Final Code

4 Answers4