将AJAX响应存储到变量中，以便稍后在脚本中使用? [英] storing AJAX response into variable for use later in script?

问题描述

这是我的代码的要旨: https://gist.github.com/tconroy/e52e0e7402face8f048e

here is the gist of my code: https://gist.github.com/tconroy/e52e0e7402face8f048e

基本上，我的程序分为几个步骤:

Basically, my program is broken down into several steps:

1. 从N个输入中检索用户输入(用户可以添加/删除)
2. 对每个输入执行AJAX查询，并为每个输入检索JSON格式的天气数据.
3. 成功完成AJAX时，将数据传递给dataReady()函数.
4. dataReady()函数将数据存储到全局Array[]

1. retrieve user input from N number of inputs (user can add/remove)
2. perform AJAX query on each input, retrieving JSON formatted weather data for each.
3. on successful AJAX, pass the data to dataReady() function.
4. dataReady() function stores the data into a global Array[]

问题是AJAX数据未存储在全局数组中.如何保存JSON响应以供以后在程序中使用?我需要将所有天气数据存储在一个数组中，因此我可以对其进行迭代以稍后在程序中创建图形.

The problem is the AJAX data is not storing in the global array. how can I save the JSON response for use later in the program? I need to store all my weather data in one array, so I can iterate through it to create my graph later in the program.

尤其是引起问题的部分:

The part causing issues in particular:

function getWeatherData(){
  // set up query strings.
  var queryBase  = "http://api.worldweatheronline.com/free/v1/weather.ashx?q=",
      queryEnd   = "&format=json&num_of_days=5&key="+weatherAPIKey;

  // iterate through each address input
  $('.inp').each(function(){
    // setup query
    var inp   = this;
    var addr  = encodeURIComponent( inp.value );
    var query = queryBase + addr + queryEnd;
    // perform query
    $.ajax({
      url: query,
      async: false,
      dataType: 'jsonp',
      success: function(json){
        // format our response data into object, push it into container array.
        var objName = String(decodeURIComponent(addr));
        var objVals = json.data.weather;
        dataReady(objName, objVals);
      },
      error: function(){
        alert(errMsg);
      }
    });
  }); // end $('.inp').each();
  // setup the graph
  setupGraph();
} // end getWeatherData();


function dataReady(objName, objVals) {
  console.log('dataReady() called.');
  responseValues[objName] = objVals;
}

推荐答案

据我了解(请参阅注释)，您正在处理异步调用中的一个典型问题.您先调用AJAX，然后再调用setupGraph()，但是ajax响应将在调用后到达，因为它是异步的.

From what I understand (see comments) you are dealing with a typical problem with asynchronous calls. You call AJAX, then you call setupGraph() but the ajax response will arrive after that call, because it is asynchronous.

首先，做async: false是坏事，错误和一切邪恶之源.永远不要使用它.对于您而言，它甚至无法工作，因为您无法强制JSONP同步.但是，即使您可以让我重复我的自我，因为这很重要:永远不要使用async: false .

First of all, doing async: false is bad, wrong and the source of all evil. Don't use it never ever. In your case it won't even work, because you can't force JSONP to be synchronous. But even if you could let me repeat my self, because this is important: don't ever use async: false.

现在回到您的问题.您应该使用的是延迟回调:

Now back to your problem. What you should is to use deferred callbacks instead:

var reqs = [];
$('.inp').each(function(){
    // some code
    reqs.push(
        $.ajax({
            // some settings
        })
    );
});

$.when.apply($, reqs).then(function() {
    setupGraph();
});

在此处了解有关$.when的更多信息: https://api.jquery.com/jQuery.when /

Read more about $.when here: https://api.jquery.com/jQuery.when/

这篇关于将AJAX响应存储到变量中，以便稍后在脚本中使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！