How to to return a value from Ajax call to server

Question

I make an ajax call to my server to retrieve some records and return them as a JSON object. Here is the code for the call

$(".reply").click(function (){

      $.ajax({
    url: "/ajax_up/",
    type: 'GET',
    dataType: "json",
    success: function (data) {
    sync_data=JSON.stringify(data)

    }

});

Am trying to use the returned data to construct grid, so when I pass the variable syncd_data which I have declared global in the Ajax call, It seems to be undefined.

$(document).ready(function(){
        var data = source_data;
  //other code
        ..........................
        ..........................

But when I do alert(sync_data) from within the ajax call as below:

$(".reply").click(function (){

          $.ajax({
        url: "/ajax_up/",
        type: 'GET',
        dataType: "json",
        success: function (data) {
        sync_data=JSON.stringify(data)

        }

    });

It shows the data correctly. I can I use this data outside the Ajax call? Any Help Insights or examples will be highly appreciated. Thanks

In this line: `var data = source_data;` What is `source_data`? Where do you define that? If it's not defined, then of course it's going to be `undefined`. — David, Jun 01 '14 at 14:39
I think Diana answered it already. Asynchronous means that your ajax call finishes before success is called. — HMR, Jun 01 '14 at 15:40

Diana Nassar · Answer 1 · 2014-06-01T17:15:06.560

1

You need to make sure you are calling that function inside of the success callback of your ajax call:

success: function (data) {
    sync_data=JSON.stringify(data);
    doSomething(sync_data);    
    }

This is because AJAX is Asynchronous, you need to make sure your call is done and successful before proceeding to the next event. Even if the variable is declared to be global.

UPDATE:

    var sync_data;

    $(document).ready(function(){

    $.ajax({
            url: "/ajax_up/",
            type: 'GET',
            dataType: "json",
            success: function (data) {
                 sync_data=JSON.stringify(data);    
               }
         });    

     });

This way, you'll make sure sync_data is, technically, populated in document.ready upon returning from the AJAX request. You can now consume it anywhere.

edited Jun 01 '14 at 17:15

answered Jun 01 '14 at 14:39

Diana Nassar

2,303
14
17

Hey Diana, that doesnt seem to get the value outside the doSomething function !!! I want to access this value globally on document.ready function – user3670066 Jun 01 '14 at 15:55
You can't get the value before your AJAX call. You can perform your AJAX call in document.ready and populate the variable on its success callback. I'll show you how in my edited answer. – Diana Nassar Jun 01 '14 at 16:05
Ok thank you waiting to see your edited answer – user3670066 Jun 01 '14 at 16:17
Updated, sorry I was away.. – Diana Nassar Jun 01 '14 at 17:15
Diana,if i print that shows null!! – user3670066 Jun 01 '14 at 17:39
What is the result of: alert(data.d)? – Diana Nassar Jun 01 '14 at 17:44

score 0 · Answer 2 · answered Jun 01 '14 at 14:39

0

add var sync_data = "" out of your ajax call and before it. And after your ajax call, you can see it's data by alert(sync_data);

by adding a variable before ajax call make it can use out of ajax call

answered Jun 01 '14 at 14:39

Janaka R Rajapaksha

3,585
1
25
28

How to to return a value from Ajax call to server

2 Answers2