How to return data from ajax

Question

I have an ajax function in javascript that hold data, and when i try to return it get nothing.
my code:

function get_conv_data(click_id,server) {  
var tmp; 
new Ajax.Request(ajaxUrl, 
    {   
        method: 'post',
        parameters: {
            'act': 'get_conv_data',                
            'click_id': click_id,
            'server':server              
        },
        onSuccess: function(res) 
        {
            alert(click_id+'xx'+server);

         tmp=res.responseText; 
        }
    }); 
    return tmp;
}

the data is 'alive' inside the ajax( the alert print is good) but now i want to return it into php array i get no result , why is that? thanks

this is because ajax is run in different thread from main thread. — A.T., Apr 17 '14 at 09:46
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Barmar, Apr 17 '14 at 09:49

score 2 · Answer 1 · answered Apr 17 '14 at 09:44

2

It is because return tmp runs before the onSuccess

function get_conv_data(click_id,server, cb) {  
var tmp; 
new Ajax.Request(ajaxUrl, 
    {   
        method: 'post',
        parameters: {
            'act': 'get_conv_data',                
            'click_id': click_id,
            'server':server              
        },
        onSuccess: function(res) 
        {
            cb(res.responseText);
        }
    }); 
}

get_conv_data((YOUR ID THING HERE),function(data){
    console.log(data);
});

Do it like that.

answered Apr 17 '14 at 09:44

smistry

1,127
1
9
9

what this means? cb(res.responseText); – user2706762 Apr 17 '14 at 10:14
It means your are calling the function that you passed in to `get_conv_data` and passing in `res.responseText` back to it. – smistry Apr 17 '14 at 10:23

Varun Achar · Answer 2 · 2014-04-17T09:53:45.610

Ajax is by definition Asynchronous. That means, it executes in the "background" while execution of the rest of the program continues. So get_conv_data will return while the Ajax executes. On successfully getting data from the server it will execute the onSuccess method (that is when your "alive" gets printed").

So execution timeline goes like :

get_conv_data --> initiate Ajax --> return;
                           Ajax request--> Server response --> onSuccess call;

Method suggested by @smistry is a good way to go.

score 1 · Answer 3 · answered Apr 17 '14 at 09:48

1

Javascript framework is single thread process and ajax run in separate thread, make ajax as sync using async: false, this will make ajax normal method/function

answered Apr 17 '14 at 09:48

A.T.

24,694
8
47
65

score 1 · Answer 4 · edited Oct 08 '15 at 21:37

Ajax calls are asynchronous. This means that return tmp is called immediately after Ajax.Request is called without waiting for the response of the ajax request. In order for your variable to contain the value of the response you either can set an async: false inside the Ajax.Request body

var tmp
new Ajax.Request(ajaxUrl, 
{   
    method: 'post',
    async: false,
    parameters: {
        'act': 'get_conv_data',                
        'click_id': click_id,
        'server':server              
    },
    onSuccess: function(res) 
    {
        alert(click_id+'xx'+server);

     tmp=res.responseText; 
    }
});

or perform the actions you want inside the onSuccess function.

Hope that helps

score 1 · Answer 5 · edited May 23 '17 at 10:26

Ajax is meant to be async

Ajax is meant to be async so you can't return the response inside the function itself. You need to create a callback function. Sync ajax crashes/locks up the browsers.

Here are some ajax examples based on xhr2 witch should be the standard now. it's supported by all new browsers including ie10,android & ios.

Simple get ajax function

//url,callback
function ajax(a,b,c){
 c=new XMLHttpRequest;
 c.onload=b;
 c.open('get',a);
 c.send()
}

Usage

ajax(url,callback);

How to access the return value inside the callback

function callback(e){
 e.target.response
 this.response
 c.response// if inline inside the ajax function.
}

Complex ajax function

//url,callback,type,FormData,uploadFunc,downloadFunc
function ajax(a,b,e,d,f,g,c){
 c=new XMLHttpRequest;
 !f||(c.upload.onprogress=f);
 !g||(c.onprogress=g);
 c.onload=b;
 c.open(e||'get',a);
 c.send(d||null)
}

Usage

var fd=new FormData();
fd.append('act','get_conv_data');
fd.append('click_id',click_id);
fd.append('server',server);
ajax(ajaxUrl,callback,'post',fd);

function callback(){
 //when the request finishes do stuff with the response.
 alert(this.response)
}

or

html

<form id="form">
 <input name="server" value="serverBLABLA">
 <input name="click_id" value="click_idBLABLA">
 <input name="act" value="get_conv_data">
</form>

js

ajax(ajaxUrl,callback,'post',new FormData(document.getElementById('form')));

function callback(){
 //when the request finishes do stuff with the response.
 alert(this.response)
}

More info about this function

https://stackoverflow.com/a/18309057/2450730

score 0 · Answer 6 · answered Apr 17 '14 at 09:48

It is because of the Javascript's asynchronous execution feature. Before the data comes and is assigned in your "tmp" variable, the return is executed. So you are getting blank data. Try below solution. Hope this will work for you :

    function get_conv_data(click_id,server) {  
    var tmp; 
    new Ajax.Request(ajaxUrl, 
    {   
    method: 'post',
    parameters: {
        'act': 'get_conv_data',                
        'click_id': click_id,
        'server':server              
    },
    onSuccess: function(res) 
    {
    alert(click_id+'xx'+server);
    tmp=res.responseText; 
    return tmp;
    }
    }); 
    }

@Barmar : Thanks for your correction. I have corrected my answer. — , Apr 17 '14 at 09:51

How to return data from ajax

6 Answers6