将服务器的json响应克隆到另一个变量中

Question

Hell guys,

I am getting a json response from the PHP script like this:

 function getAuctionItems() { var copiedObject = {}; var jqxhr = $.post( "php/server.php", {command:'auctions'},function() {}) .done(function(data) { if(data){ copiedObject =data; } else{ } }); return copiedObject; } 

As you can see the data contains the json results (data is all fine) but when i want to return the results it returns empty object.... how do i return the data from this ajax request so that the other function will use it? Obviously I cannot simply clone copiedObject =data;

Answer 1

The post call is asynchronous, so you have to use the value from the done function. Generally, you would do something like:

function getAuctionItems()
{  
        var copiedObject = {};
        var jqxhr = $.post( "php/server.php", {command:'auctions'},function() {})
          .done(function(data) {

                if(data){
                    dosomethingWithData(data);
                }
                else{
                }
           });
}

function dosomethingWithData(data) {
  doSomethingwithThedata.......
} 

Because JavaScript isn't waiting around for an expensive process like a post, it has moved on, and is waiting for the done event to actually parse the data.

Answer 2

I am giving you an example how to do it-

$.ajax
    (
        {
            url:"ajax_state_load/"+$('#country_data').val(),success:function(result)
            {
                $("#car_model").html(result);
                $('#region_data')
                    .empty()
                    .append(result);
                ;
            }
            ,error:function()
            { 
                console.error('Region Load Failed.');
            }
        }
    );

And everything should be inside

$(document).ready(function()

If you are using jQuery.

Answer 3

This is because "copiedObject" is returned before the post request is completed.

You might need something like...

if(data)
{
  myOtherFunction(data);
}

Where "myOtherFunction" is a function you create to handle the returned data. Drew

Answer 4

The typical way of handling this is by passing a callback to your function:

function getAuctionItems(callback)
{  
    $.post( "php/server.php", {command:'auctions'},function() {})
        .done(function(data) {
            if (data) {
                callback(data);
            }
        });
}

Then, call like this:

getAuctionItems(function(data) {
    // do something with data
});

Answer 5

Ajax calls are async in nature. Javascript won't wait for the response before returning copiedObject.

Using callback is working fine, but a more elegant way is using Deferred and Promise. It has more flexibility and decouple your ajax calls to your business logic.

To convert your code into Deferred/Promise way.

function getAuctionItems()
{         
    return $.post( "php/server.php", {command:'auctions'});
}

Then in other method, call like this:

getAuctionItems().done(function(data){
     //your logic to process data
});

Moreover, if you want to cache your data locally and make the data-fetching logic completely decoupled from your data-processing logic.

var dataCached = null;

function fetchData(user){
    var dfd = $.Deferred();
    if(dataCached != null){
        dfd.resolve(dataCached);
    }else{
         $.post("three.htm", {
              user: user
          },function(data){
               dataCached = data;
              dfd.resolve(data);
         }); 
    } 

    return dfd.promise();
}

$.when(fetchData("Jack")).then(function(data){
   //play with the data
});