如何讓我的腳本可以訪問我的 JSON 數據？

Question

我的目錄是這樣的

app/
  index.html
  script.js
  data.json

聽起來不錯？ 現在，我想從我的 JSON 數據中隨機選擇一個 object 並在每次加載我的文檔時將其呈現給用戶，好嗎？ 現在我在第一部分有一個問題，以盡可能最佳的方式從我的data.json中獲取數據。 我可以在我的script.js中添加一個 XMLHttpRequest() 來獲取我的data.json的內容，或者我什至會使用 fetch API，但我知道這些是為了“獲取”跨 Z2567A5EC9705EB7AC2DZE9840 的數據而設計的對於這樣一個簡單的任務，我的意思是你不需要發送 HTTP 請求來將你的 CSS 與你的 HTML 鏈接起來，對嗎？ 所以我發現必須有一種方法可以輕松做到這一點，我發現的一個答案是將您的數據鏈接為<script id="data" src="./data.json" type="application/json"></script>然后你可以document.getElementById("data")它，但由於某種原因這對我不起作用，我提供的一種解決方法是將我的data.json更改為data.js並且只是為我的整個 JSON 數據添加一個var data =前綴，然后將其導入我的index.html ，現在我可以從我的腳本中訪問變量data ，但我覺得這太老套了，不是/不應該是最佳的到 go 周圍。 我認為這觸及了 CORS/Same-origin 的主題，這是我對這個概念的掌握微弱。 非常感謝對這里發生的事情的詳細解釋:)

編輯：提供的答案僅涉及獲取 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文件

IE。 使用'/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 全局 scope 中。

3) 在文檔中嵌入.json文件（通過<object>或<iframe> ）

當我們之前討論時，我評論說：

我猜是因為 HTML 缺少像<file type="application/json" src="/app/data.json" />的東西（類似於<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. 通過<object>在文檔中嵌入.json