前言

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(jsonData));

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(jsonData));</script>
</body></html>

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

新手如何使用JavaScript读取json文件 v2.0相关推荐

《机器学习与数据科学（基于R的统计学习方法）》——2.8　读取JSON文件
本节书摘来异步社区<机器学习与数据科学(基于R的统计学习方法)>一书中的第2章,第2.8节,作者:[美]Daniel D. Gutierrez(古铁雷斯),更多章节内容可以访问云栖社区&q ...
本地服务器json文件,从本地ftp服务器读取Json文件
我是存储在本地服务器中的名为File1.js的json文件.我想读取json文件的内容,并希望在其他文件中显示数据.我已经尝试使用JavaScript编码,但它不能正常工作.从本地ftp服务器读取Js ...
Java 读取 JSON 文件转成 Map 对象
Java 读取 JSON 文件转成 Map 对象应用场景待读取的外部 JSON 文件 Java 代码读取结果 Gson 应用场景 Jar 包或 War 包引用一个外部文件作为项目运行的配置文件 ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
R读取json文件并转化为dataframe
R读取json文件并转化为dataframe 目录 R读取json文件并转化为dataframe R读取json文件把json转为dataframe
cocos2d-x之读取json文件
cocos2d-x之读取json文件在resource文件夹下,添加data.json文件新建->Other->empty->open 就新建一个json文件了, data.js ...
javascript读取xml文件读取节点数据的例子
分享下用javascript读取xml文件读取节点数据方法. 读取的节点数据,还有一种情况是读取节点属性数据. <head> <title></title> < ...
python读取json配置文件_Python简单读取json文件功能示例
本文实例讲述了Python简单读取json文件功能.分享给大家供大家参考,具体如下: read_json.json: { "rule":{ "namespace" ...
java spark 读取json_apache-spark - 与aws-java-sdk链接时，在读取json文件时发生Spark崩溃 - 堆栈内存溢出...
让config.json成为一个小的json文件: { "toto": 1 } 我做了一个简单的代码,用sc.textFile读取json文件(因为文件可以在S3,本地或HDFS上 ...

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

前言

1. 导入jQuery

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

3. 完整代码

新手如何使用JavaScript读取json文件 v2.0相关推荐

最新文章

热门文章