新手如何使用JavaScript读取json文件 v2.0

凉面条加鸡蛋

已于 2023-12-18 15:12:53 修改

阅读量1.7k

点赞数 6

文章标签： javascript json 前端

于 2023-02-27 21:07:52 首次发布

本文链接：https://blog.csdn.net/aLoudVoice_/article/details/129249065

版权

本文介绍了如何使用jQuery的getJSON()函数来读取本地或网络上的JSON文件。首先，讲解了如何引入jQuery库，然后详细阐述了$.getJSON()函数的用法，包括URL、可选参数data和回调函数success()。示例代码展示了从相对路径读取JSON文件并处理数据的方法。最后提供了一个完整的HTML示例，展示如何在实际项目中应用这些概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

3年前，我在纯小白时期写的一篇文章：新手如何使用JavaScript读取json文件至今仍时常有小伙伴点击。
如今自己在此知识领域已经有所成长，故重写一篇更高质量，更有帮助的文章，希望更有效的帮助到大家。
话不多说，直接开始

1. 导入jQuery

你可能不知道什么是jQuery，但是无所谓，我们只是用它一个函数
在 html 文档的 head 中引入jQuery：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text</title>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
</head>

jQuery最新地址可以在jQuery官网点击这个链接，把弹出来的网页地址替换掉<script src="https://code.jquery.com/jquery-3.6.3.js"></script>中的http地址即可，你就完成了一次引入在线JavaScript资源
在这里插入图片描述

2. $.getJSON()函数读取JSON数据

使用jQuery的 getJSON() 函数，可以读取JSON
注意：$ 就是JQuery的全局变量名，所以$.getJSON()就是jQuery.getJSON()
函数文档如下：
在这里插入图片描述
getJSON()函数有3个参数：

参数1：url 。这个路径可以使本地路径，也可以是网络路径（也叫接口路径）
参数2：data（可选参数）。如果是本地JSON文件，不需要；如果是接口路径，有的接口路径需要先传给它一些参数才能拿到JSON数据，如用户名、城市名等等
参数3：回调函数success()（可选参数）。表示你拿到JSON数据后，你打算怎么使用这个数据

具体使用方法如下：
假如json文件存放在当前js文件的相对路径为：./data/test.json，则代码为：

$.getJSON('./data/test.json', function(data) {
  console.log(data);
});

最重要的就是这个回调函数了，你想拿到数据后怎么用这个数据，你就在这里面写什么操作。
当然也可以先把函数写好，读取JSON的时候直接传进去，这样代码可读性更好。

function doSomethingToJSON(jsonData){
	console.log(jsonData);
	// ...
}
$.getJSON('./data/test.json', doSomethingToJSON);

3. 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text</title>
    <!-- 引入jquery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <h1>测试</h1>
    <script>
	function doSomethingToJSON(jsonData){
		console.log(jsonData);
		// ...
	}
	$.getJSON('./data/test.json', doSomethingToJSON);

    </script>
</body>

</html>

就一个简单的函数，现在看起来特别简单。有问题欢迎留言，我会尽量解答