javascript - 在ajax中合并来自不同URL的数据

Question

我有一个 ajax 请求，用于从 API 中提取数据，并根据提取的数据创建一个表。现在我需要做同样的事情，但是要从两个不同的 URL 提取数据并合并到同一个表 (retTable)。

这是我当前的代码(一个ajax请求):

$.ajax(
    {
        url : '/url/status',
        type: "GET",
        success:function(data, textStatus, jqXHR)
        {
            theRows = extract_status_data(data)
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            alert('error')
        }
    });
}

function extract_status_data(jsonDataRaw){
    jsonResultSect = jsonDataRaw['result']
    retTable = ""
    for( key in jsonResultSect){
        statusParam = jsonResultSect[key]

        a = statusParam['a']
        b = statusParam['b']
        c = statusParam['c']
        d = statusParam['d']
        e = statusParam['e']

        retTable += "<tr><td>" + dropDownList(key) + "</td><td>" + key +  "</td><td>" + a + "</td><td>" + b + "</td><td>" + c + "</td><td>" + d + "</td><td>" + e + "</td></tr>"

}
    return retTable
}

如何正确组合来自两个不同 URL 的数据？请指教。

Answer 1

我现在无法敲定出一个真正强大的解决方案，但这是我想出的:https://jsfiddle.net/heejse8h/

基本上，原则是将所有 URL 放入一个数组中，并为您从中提取的每个 URL 保持递增的标志变量。这可能看起来像这样:

urls = [
  '/url/status',
  '/url/status2'
];

var i = 0;

然后，当您执行 AJAX 时，您需要将其存储在某个数组中

var result = [];

对于 jsfiddle 中的 AJAX 调用，我使用了这个基本结构

$.ajax({
  url : urls[i],
  type: "GET",
  success: function(data) {
    // simplified example of storing the results
    // the example code from the fiddle is more
    // involved.
    result[key].push(data);

    if(urls[++i] !== undefined){
      // if there is another URL, use the same
      // ajax object (using `this`), extend it,
      // changing only the URL, and call it.
      // the important part is that the `this`
      // object has a reference to the currently
      // executing `success` method.
      $.ajax($.extend(this, {url: urls[i]}));
    } else {
      // otherwise, we're at the end of our URLs
      // and we can focus on final formatting and
      // display of the data.
      for( key in result ){
        $('#mytable').append("<tr><td>" + dropDownList(key) + "</td><td>" + key +  "</td>" + result[key].join('') + "</tr>");
      }
    }
  }
});

最后，我希望充实它并使用 DOM API 来实际创建节点而不是不断的串联，但这个解决方案已经与原始代码有很大的分歧。您可能需要考虑创建一个解析对象而不是依赖于串联的函数。