12

我有这个代码：

var graphicDataUrl = 'graphic-data.json';
var webDataUrl = 'web-data.json';
var templateHtml = 'templating.html';
var viewG = $('#view-graphic');
var viewW = $('#view-web');

$.getJSON(dataUrls, function(data) {
    $.get(templateHtml, function(template) {
        template = Handlebars.compile(template);
        var example = template({ works: data });        
        viewG.html(example);
        viewW.html(example);
    }); 
});

调用 webDataUrl 和 graphicsDataUrl JSON 并使用它们的数据以在两个不同的 div（#viewG 和 #viewW）中显示它们的最佳方式是什么？

4

3 回答 3

37

最好的方法是单独做每一个，并处理错误情况：

$.getJSON(graphicDataUrl)
    .then(function(data) {
        // ...worked, put it in #view-graphic
    })
    .fail(function() {
        // ...didn't work, handle it
    });
$.getJSON(webDataUrl, function(data) {
    .then(function(data) {
        // ...worked, put it in #view-web
    })
    .fail(function() {
        // ...didn't work, handle it
    });

这允许请求并行发生，并在每个请求完成时尽快更新页面。

如果您想并行运行请求但等待更新页面直到它们都完成，您可以这样做$.when：

var graphicData, webData;
$.when(
    $.getJSON(graphicDataUrl, function(data) {
        graphicData = data;
    }),
    $.getJSON(webDataUrl, function(data) {
        webData = data;
    })
).then(function() {
    if (graphicData) {
        // Worked, put graphicData in #view-graphic
    }
    else {
        // Request for graphic data didn't work, handle it
    }
    if (webData) {
        // Worked, put webData in #view-web
    }
    else {
        // Request for web data didn't work, handle it
    }
});

...但是页面可能看起来响应速度较慢，因为您在第一个请求返回时没有更新，但只有在两者都更新时才更新。

于 2013-09-26T11:02:17.153 回答
14

以防万一它对其他可能遇到此问题的人有用——并且感谢 jQuery 中的 Promise 进步——TJ Crowder 的答案现在可以改进为一个简洁而通用的函数：

/**
 * Load multiple JSON files.
 *
 * Example usage:
 *
 * jQuery.getMultipleJSON('file1.json', 'file2.json')
 *   .fail(function(jqxhr, textStatus, error){})
 *   .done(function(file1, file2){})
 * ;
 */
jQuery.getMultipleJSON = function(){
  return jQuery.when.apply(jQuery, jQuery.map(arguments, function(jsonfile){
    return jQuery.getJSON(jsonfile);
  })).then(function(){
    var def = jQuery.Deferred();
    return def.resolve.apply(def, jQuery.map(arguments, function(response){
      return response[0];
    }));
  });
};

然而，在等待满载时不向用户提供任何反馈的观点是好的。因此，对于那些喜欢提供响应式反馈的人，这里有一个稍微复杂的版本来支持进度。

/**
 * Load multiple json files, with progress.
 *
 * Example usage:
 *
 * jQuery.getMultipleJSON('file1.json', 'file2.json')
 *   .progress(function(percent, count, total){})
 *   .fail(function(jqxhr, textStatus, error){})
 *   .done(function(file1, file2){})
 * ;
 */
jQuery.getMultipleJSON = function(){
  var 
    num = 0,
    def = jQuery.Deferred(),
    map = jQuery.map(arguments, function(jsonfile){
      return jQuery.getJSON(jsonfile).then(function(){
        def.notify(1/map.length * ++num, num, map.length);
        return arguments;
      });
    })
  ;
  jQuery.when.apply(jQuery, map)
    .fail(function(){ def.rejectWith(def, arguments); })
    .done(function(){
      def.resolveWith(def, jQuery.map(arguments, function(response){
        return response[0];
      }));
    })
  ;
  return def;
};
于 2016-03-13T21:49:37.263 回答
2

此代码很简单，您可以在一个函数中同时访问这两个响应：

$.when(
    $.getJSON(graphicDataUrl),
    $.getJSON(webDataUrl)
).done(function(data1, data2) {
    console.log(data1[0]);
    console.log(data2[0]);
});
于 2018-10-14T11:07:41.557 回答