javascript - 如何简单地使我的脚本可以访问我的 JSON 数据？

Question

我的目录是这样的

app/
  index.html
  script.js
  data.json

听起来不错吗？现在，我想从 JSON 数据中选择一个随机对象，并在每次加载文档时将其呈现给用户，好吗？现在我在第一部分遇到问题，从我的 data.json 获取数据以尽可能最佳的方式。我可以在我的 script.js 中添加 XMLHttpRequest()获取我的 data.json 的内容或者我什至会使用 fetch API，但我知道这些 API 是为了通过网络“获取”数据而设计的，对于这样一个简单的任务来说被认为是一种矫枉过正，我的意思是你不需要发送 HTTP 请求将 CSS 与 HTML 链接起来，可以吗？所以我想一定有一种方法可以轻松做到这一点，我发现的一个答案是将您的数据链接为 <script id="data" src="./data.json" type="application/json"></script>然后你就可以document.getElementById("data")它，但由于某种原因这对我不起作用，我带来的一种解决方法是更改​​我的 data.json至data.js只需添加 var data =为我的整个 JSON 数据添加前缀，然后将其导入到我的 index.html 中现在我可以访问变量 data来 self 的脚本，但我觉得这太老套了，不是/不应该是解决这个问题的最佳方案。我认为这触及了 CORS/同源的主题，这是一个我不太了解的概念。如果能详细解释这里发生的事情，我们将不胜感激:)

编辑:提供的答案仅涉及 fetch API，我的问题是为什么需要 HTTP 请求才能访问本地文件？为什么我们不能像其他东西一样通过链接标签链接 JSON 数据，例如我们的 HTML、CSS、JS 都使用链接/脚本标签进行链接。

Answer 1

我提出了以下三种方法:

1) 获取(或 XHR).json文件

我肯定会考虑使用Fetch API (或 XHR )作为使 Web 文档能够检索 .json 的标准方法。来自服务器的文件。

fetch('/app/data.json')
  .then(response => response.json())
  .then(json => console.log(json));

2) 引用.js文件而不是 .json文件

即。 使用'/app/my-json-data.js'而不是'/app/data.json'

正如您在问题中正确指出的那样，您可以上传 .js文件到您的服务器而不是 .json文件，其中，如果您的原始 JSON 文件 '/app/data.json'看起来像这样:

{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}

然后是你的JS文件'/app/my-json-data.js'相反，看起来像这样:

let myJSONData = '{"Name" : "Data", "Section 1" : {"A" : "a", "B" : "b"}, "Section 2" : ["C", "D"]}';

然后您可以使用以下方法将该 JSON 字符串检索到文档中:

<script src="/app/my-json-data.js"></script>

之后该字符串将作为变量 myJSONData 存在于文档的 javascript 全局范围中。 .

3) 嵌入.json文件中的文件(通过 <object> 或 <iframe> )

我们之前讨论时，我评论道:

I guess because HTML lacks anything like <file type="application/json"
src="/app/data.json" /> (analogous to <img src="/app/my-image.png"
alt="My Image" />).

然后，我想知道这是否是真的。事实证明，事实并非如此。

这是检索 .json 的第三种方法来自服务器:

<小时/>

使用 HTML5 <embed>

<embed>似乎已被锁定，其 contentDocument无法访问。不清楚原因。

<小时/>

使用HTML5 <object>

HTML:

<object data="/app/data.json" style="display: none"></object>

JS:

<script>
let myObject = document.getElementsByTagName('object')[0];

const getJSONFromObject = () => {
  console.log(myObject.contentDocument.body.textContent);
}

myObject.addEventListener('load', getJSONFromObject);
</script>

<小时/>

使用HTML5 <iframe>

HTML:

<iframe src="/app/data.json" style="display: none"></iframe>

JS:

<script>
let myIframe = document.getElementsByTagName('iframe')[0];

const getJSONFromIframe = () => {
  console.log(myIframe.contentDocument.body.textContent);
}

myIframe.addEventListener('load', getJSONFromIframe);
</script>

<小时/>

按照个人喜好，我最喜欢的方法是:

1. Fetch .json文件
2. XHR .json文件
3. 使用 .js文件而不是 .json文件
4. 嵌入.json在文档中通过 <object>