如何从本地文件导入 JSON 数据 - JavaScript

在 JavaScript 中，我们可以使用 fetch() 方法来从本地文件导入 JSON 数据。使用 fetch() 方法可以轻松地从文件或远程服务器获取数据。

下面是一些将 JSON 文件导入到 JavaScript 中的示例代码。

1. 使用 fetch() 方法读取本地 JSON 文件

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    console.log(data); // 这里可以对获取的 JSON 数据进行操作
  })
  .catch(error => console.error(error));

在上面的代码中，我们使用 fetch() 方法来获取文件 data.json 中的数据。然后，我们使用 .json() 方法来解析响应并将其转换为 JavaScript 对象。最后，我们可以对获取的 JSON 数据进行操作，例如打印到控制台。

2. 在 HTML 中使用 script 标签引入

如果我们的 JavaScript 代码在 HTML 中执行，我们可以使用 script 标签将 JSON 数据导入到 JavaScript 中。

<script src="data.json" type="application/json"></script>
<script>
  // 可以直接使用全局变量 `jsonData` 来访问导入的 JSON 数据
  console.log(jsonData);
</script>

在上面的代码中，我们使用 script 标签的 src 属性指定要导入的 JSON 文件，并使用 type 属性指定响应的 MIME 类型为 application/json。然后，我们可以使用全局变量 jsonData 来访问导入的 JSON 数据。

3. 使用 AJAX 库如 jQuery 或 Axios

除了使用原生的 JavaScript 方法，我们还可以使用流行的 AJAX 库如 jQuery 或 Axios。这些库提供了简化的方法来从本地文件导入 JSON 数据。

使用 jQuery

$.getJSON('data.json', function(data) {
  console.log(data); // 这里可以对获取的 JSON 数据进行操作
});

在上面的代码中，我们使用 jQuery 的 $.getJSON() 方法来获取文件 data.json 中的数据，并在回调函数中对数据进行操作。

使用 Axios

axios.get('data.json')
  .then(response => {
    console.log(response.data); // 这里可以对获取的 JSON 数据进行操作
  })
  .catch(error => console.error(error));

在上面的代码中，我们使用 Axios 的 get() 方法来获取文件 data.json 中的数据。然后，我们可以访问响应对象的 data 属性来获取 JSON 数据。

希望这些示例代码可以帮助你从本地文件导入 JSON 数据并在 JavaScript 中使用。请确保文件路径正确，并处理导入的数据以满足你的需求。