如何构造ajax调用

时间:2015-02-23 23:31:01

标签: jquery ajax

目前我有两个静态的javascript值数组(d1和d2),然后传递给javascript对象(数据)。

$(function () {

  var d1, d2, data
  d1 = [
    [1424131200000,20151],[1424217600000,22448],[1424304000000,27000],[1424390400000,30622],[1424476800000,30844],[1424563200000,23140],[1424649600000,20555]
  ]
  d2 = [
    [1424131200000,18664],[1424217600000,19149],[1424304000000,20415],[1424390400000,24617],[1424476800000,30278],[1424563200000,28808],[1424649600000,22032]
  ]

  data = [{ 
    label: "This Year", 
    data: d1
  }, {
    label: "Last Year",
    data: d2
  }]
  var holder = $('#line-chart')
  if (holder.length) {
    $.plot(holder, data, chartOptions )
  }  
})  

我想更改我的代码以实现相同的功能,但是从两个ajax调用加载值而不是静态定义值。但是我遇到了麻烦。有人可以帮助我如何修改我下面的内容,以实现我上面静态定义的内容。

这是我到目前为止所拥有的......

$(function () {
  var data
  fetchData(function (data) {
      console.log(data);
  }); 
  var holder = $('#line-chart')
  if (holder.length) {
    $.plot(holder, data, chartOptions )
  }  
})  

function fetchData(callback) {

    $.when(fetchThisYearsData(), fetchLastYearsData()).done(function (dataThisYear, dataLastYear) {
        var data = [];
        data.push(dataThisYear[0]);
        data.push(dataLastYear[0]);
        callback(data);
    });
}

function fetchThisYearsData() {
    return $.ajax({
          url: "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=0",
          dataType: 'json',
          async: false
        }); 
}

function fetchLastYearsData() {
    return $.ajax({
          url: "service/tranAnalysis/tranCounts.json?siteId=1&yearOffset=1",
          dataType: 'json',
          async: false
        });     
}

两个ajax调用返回以下json ...

{"label":"This Year","data":[[1424131200000,20151],[1424217600000,22448],[1424304000000,27000],[1424390400000,30622],[1424476800000,30844],[1424563200000,23140],[1424649600000,20555]]}

{"label":"Last Year","data":[[1424131200000,18664],[1424217600000,19149],[1424304000000,20415],[1424390400000,24617],[1424476800000,30278],[1424563200000,28808],[1424649600000,22032]]}

当我在firebug中调试时,看起来似乎正在发生ajax调用,并且在回调函数内部填充了数据变量。但是当我接到$ plot的调用时,数据变量为空/ null。

感谢

1 个答案:

答案 0 :(得分:1)

那些AJAX调用是 async - 所以你需要在回调中完成工作(否则你在AJAX调用仍在进行时试图访问data):< / p>

$(function () {
    fetchData(function (data) {
        var holder = $('#line-chart')
        if (holder.length) {
            $.plot(holder, data, chartOptions )
        }  
    });
})