Question

这是一个新手JavaScript问题，但是我不太确定如何谷歌寻求帮助，因为我不确定如何以简单的方式描述问题。

我需要操作一个庞大的，有点复杂的JSON，这样我就能以一种只获得国家，城市和销售的列表的方式重塑JSON。

JSON本身对我来说不是问题，这是我收到它后我想用它做的事情。基本上，我想从一个大的接收JSON创建3个独立的对象/数组，并且可以使用这些3个独立的对象/数组来使用$.ajax调用的OUTSIDE。是的，我想我可以在$.ajax成功回调中完成所有这些，但我宁愿在其他地方完成所有JSON处理。我的伪JavaScript看起来像这样：

var model = {
  countries: [],
  cities: [],
  sales: [],
  set: function(data) {
    //manipulate data here so that model.countries, model.cities, model.sales are populated
  }      
};


$.ajax({
  url: 'example.com/sample.json',
  success: function(data) {
    model.set(data);    //is this the right way to do this?
  }
});

$('#countries').html(model.countries);
$('#cities').html(model.cities);
$('#sales').html(model.sales);

但是因为JavaScript是异步执行的，所以最后3行总是空白的，因为还没有收到JSON。

所以我想我的问题是，如何将收到的JSON的结果绑定到$.ajax范围之外的变量，以便我可以在页面的任何位置使用它？

Answer 1

简单的解决方案就是：

$.ajax({
  url: 'example.com/sample.json',
  success: function(data) {
    model.set(data);
    $('#countries').html(model.countries);
    $('#cities').html(model.cities);
    $('#sales').html(model.sales);
  }
});

如果你想要更具框架性的东西，那么你可以看一下像Backbone.js这样的东西。

Answer 2

在AJAX成功回调中填充HTML（即更新视图）。即。

function updateView() {
  $('#countries').html(model.countries);
  $('#cities').html(model.cities);
  $('#sales').html(model.sales);
}

$.ajax({
  url: 'example.com/sample.json',
  success: function(data) {
    model.set(data);    //is this the right way to do this?
    updateView();
  }
});

Answer 3

只需将这3行放在success回调中（您也可以将其分成函数）并跳过model种群。

有些框架允许您将DOM元素绑定到JS对象及其数据，在这种情况下，它可能是一种过度杀伤。

javascript异步困境

3 个答案: