首頁 > web前端 > js教程 > 如何使用JavaScript從本機JSON檔案讀取資料?

如何使用JavaScript從本機JSON檔案讀取資料?

Barbara Streisand
發布: 2024-12-22 05:26:14
原創
730 人瀏覽過

How Can I Read Data from a Local JSON File Using JavaScript?

在JavaScript 中讀取外部本地JSON 檔案

要在JavaScript 中從外部本地JSON 檔案存取數據,請按照以下步驟操作數據:

創建JSON檔:

  • 將JSON 資料儲存在本機檔案中,例如test.json,其中包含以下內容:
{
  "resource": "A",
  "literals": ["B", "C", "D"]
}
登入後複製

JavaScript程式碼:

建立JSON 檔案後,編寫JavaScript腳本來讀取它:

// Step 1: Get JSON file path
const filePath = "/Users/Documents/workspace/test.json";

// Step 2: Create XMLHttpRequest object
const xhr = new XMLHttpRequest();

// Step 3: Open and send request
xhr.open("GET", filePath);
xhr.send();

// Step 4: Handle response
xhr.onload = function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);

    // Step 5: Access JSON data
    console.log(response.resource); // Output: "A"
    console.log(response.literals); // Output: ["B", "C", "D"]
  } else {
    console.error(`Error: ${xhr.status} - ${xhr.statusText}`);
  }
};
登入後複製

用法範例:

要使用此程式碼,請在HTML 文件中包含test.json 檔案和JavaScript 腳本:

<script src="/Users/Documents/workspace/test.json"></script>
<script src="script.js"></script>
登入後複製

此程式碼建立對JSON 檔案的非同步HTTP GET 要求,檢索回應,將其解析為JSON,然後列印將相關資料傳送到控制台。

以上是如何使用JavaScript從本機JSON檔案讀取資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板