在前端开发过程中，JSON 是一种非常常见的数据交换格式。有时候我们需要用 JavaScript 从一个 JSON 文件中获取数据，并将其应用到我们的网页或者应用程序中。
本文将介绍如何用 JavaScript 读取 .json 文件，并提供代码示例和指导意义。
1. 基础方法
最简单的方法就是用 XMLHttpRequest 对象发送 HTTP 请求来获取 .json 文件。以下是实现代码：
--- ------- - --- ----------------- ------------------- --------------- ------- ------------------- --- -------- - ---------------------------------
这里 open() 函数指定了请求的类型和 URL，send() 函数则发送请求并等待响应。最后，我们使用 JSON.parse() 函数将响应的 JSON 字符串转换成 JavaScript 对象。
2. 使用 jQuery
如果您使用的是 jQuery，那么可以使用 jQuery 的 AJAX 方法来读取 .json 文件。下面是代码示例：
--------
---- ---------------
--------- -------
-------- -------------- -
-- ------ ---- --
-
---在这个示例中，我们使用了 $.ajax() 函数来发送 GET 请求，并指定了 URL 和数据类型。当请求成功时，success 回调函数会被调用，该函数的 data 参数包含了获取到的 JSON 数据。
3. 使用 fetch API
fetch API 是现代浏览器中用于获取资源的标准方式，可以更方便地读取 JSON 文件。以下是代码示例：
---------------------
-------------- -- ----------------
---------- -- -
-- ------ ---- --
---在这个示例中，我们使用 fetch() 函数发送 GET 请求并返回一个 Promise 对象。当 Promise 对象被解析时，response.json() 函数会将响应的 JSON 字符串转换为 JavaScript 对象，最终的结果通过 data 参数传递给 then() 回调函数。
总结
本文介绍了三种方法让 JavaScript 读取 .json 文件：基础方法、jQuery 和 fetch API，每种方法都有不同程度的优点和缺点。对于简单的应用场景，基础方法就已经足够；而对于复杂的应用场景，则需要根据实际情况选择合适的方法。无论哪种方法，都需要注意安全性和性能问题。
希望本文能够帮助你更好地处理 JSON 数据，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30773