如何让 JavaScript 读取 .json 文件？

在前端开发过程中，JSON 是一种非常常见的数据交换格式。有时候我们需要用 JavaScript 从一个 JSON 文件中获取数据，并将其应用到我们的网页或者应用程序中。

本文将介绍如何用 JavaScript 读取 .json 文件，并提供代码示例和指导意义。

1. 基础方法

最简单的方法就是用 XMLHttpRequest 对象发送 HTTP 请求来获取 .json 文件。以下是实现代码：

let request = new XMLHttpRequest();
request.open("GET", "example.json", false);
request.send(null);
let jsonData = JSON.parse(request.responseText);

这里 open() 函数指定了请求的类型和 URL，send() 函数则发送请求并等待响应。最后，我们使用 JSON.parse() 函数将响应的 JSON 字符串转换成 JavaScript 对象。

2. 使用 jQuery

如果您使用的是 jQuery，那么可以使用 jQuery 的 AJAX 方法来读取 .json 文件。下面是代码示例：

$.ajax({
  url: 'example.json',
  dataType: 'json',
  success: function(data) {
    // 处理读取到的 JSON 数据
  }
});

在这个示例中，我们使用了 $.ajax() 函数来发送 GET 请求，并指定了 URL 和数据类型。当请求成功时，success 回调函数会被调用，该函数的 data 参数包含了获取到的 JSON 数据。

3. 使用 fetch API

fetch API 是现代浏览器中用于获取资源的标准方式，可以更方便地读取 JSON 文件。以下是代码示例：

fetch('example.json')
  .then(response => response.json())
  .then(data => {
    // 处理读取到的 JSON 数据
  });

在这个示例中，我们使用 fetch() 函数发送 GET 请求并返回一个 Promise 对象。当 Promise 对象被解析时，response.json() 函数会将响应的 JSON 字符串转换为 JavaScript 对象，最终的结果通过 data 参数传递给 then() 回调函数。

总结

本文介绍了三种方法让 JavaScript 读取 .json 文件：基础方法、jQuery 和 fetch API，每种方法都有不同程度的优点和缺点。对于简单的应用场景，基础方法就已经足够；而对于复杂的应用场景，则需要根据实际情况选择合适的方法。无论哪种方法，都需要注意安全性和性能问题。

希望本文能够帮助你更好地处理 JSON 数据，提高前端开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30773