Gọi nhiều JSON dữ liệu/file trong một yêu cầu getJSON

Question

tôi có mã này:

var graphicDataUrl = 'templating/graphic-data.json'; 
var webDataUrl = 'templating/web-data.json'; 
var templateHtml = 'templating/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); 
    }); 
}); 

cách tốt nhất để gọi cả hai dataUrl JSONs là gì và sử dụng dữ liệu của họ để hiển thị chúng trong hai div khác nhau (#viewW và #viewW) trên trang của tôi?

Answer 1

Cách tốt nhất là để làm mỗi một cá nhân, và để xử lý tình trạng lỗi:

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

đó cho phép các yêu cầu để xảy ra song song, và cập nhật trang càng sớm càng tốt khi mỗi yêu cầu hoàn tất.

Nếu bạn muốn chạy theo yêu cầu song song nhưng chờ để cập nhật trang cho đến khi họ cả hoàn tất, bạn có thể làm điều đó với $.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 
    } 
}); 

... nhưng trang có vẻ ít phản hồi hơn vì bạn không cập nhật khi yêu cầu đầu tiên quay trở lại, nhưng chỉ khi cả hai thực hiện.

Answer 2

Chỉ trong trường hợp nó hữu ích đối với bất kỳ ai khác có thể gặp phải số này — và nhờ lời hứa Hứa hẹn trong jQuery — T.J. câu trả lời Crowder của bây giờ có thể được cải thiện thành một chức năng ngắn gọn và tổng quát:

/** 
* 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]; 
    })); 
    }); 
}; 

Tuy nhiên điểm về việc không đưa ra bất kỳ thông tin phản hồi cho người dùng — trong khi chờ đợi đầy tải — là một tốt nhất. Vì vậy, đối với những người thích cung cấp phản hồi phản hồi, đây là phiên bản hơi phức tạp hơn hỗ trợ tiến trình.

/** 
* 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; 
};