将数据从 json 文件导入到从文件本地运行的网页中：URL 来源答案

【问题标题】：Import data from json file into webpage running locally from file: URL origin将数据从 json 文件导入到从文件本地运行的网页中：URL 来源
【发布时间】：2018-02-14 12:00:22
【问题描述】：

我正在浏览器中本地查看带有相关资产的网页，因此 URL 来源（在 Chrome 中）是 file:///。本地文件层次结构如下所示：

./
index.html
script.js
data.json

fetch 和 xhr 似乎不起作用。如何将 .json 文件中的数据获取到网页中（使用 vanilla JavaScript 无库）？

【问题讨论】：

标签： javascript json import

【解决方案1】：

使用jquery，然后使用$.getJSON. $.getJSON 是异步的，所以你应该这样做：

  $.getJSON("data.json", function(json) {
     document.write(json);        
     console.log(json); // this will show the info it in firebug console
    });

【讨论】：

对不起——我忘了提到在这种情况下我不能使用任何库依赖项，所以 jQuery 在这种情况下将无法工作。我已更新问题以反映这一点。

【解决方案2】：

如果您想使用 file:// 提供资产，则需要使用相对 URL。所以 fetch 就像fetch('data.json').then(data => //do something)

网址不应以斜杠开头，否则看起来该文件应该位于您的目录结构中。通过查看浏览器的 JavaScript 控制台，您可能会有所了解...

【讨论】：