小编典典

在一个getJson请求中调用多个JSON数据/文件

json

我有以下代码:

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和graphicDataUrl
JSON并使用它们的数据以便在两个不同的div(#viewG和#viewW)中显示它们的最佳方法是什么?


阅读 645

收藏
2020-07-27

共1个答案

小编典典

最好的方法是单独执行每个操作,并处理错误情况:

$.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
    }
});

…但是该页面的响应速度似乎较慢,因为您不会在第一个请求返回时更新,而只有在两者都更新时才更新。

2020-07-27