多语言展示
当前在线:1481今日阅读:27今日分享:41

js如何读取json文件

js如何读取json文件
工具/原料
1

js

2

json文件

3

vscode

方法/步骤
1

先准备一个json文件

3

开始撰写js方法使用原生javascript来处理先处理读取json文件之后运行这个html

4

上一步得到的json就是我们index.json文件中的内容在开发者工具中就能看到显示的数据

5

为了便于查看我们json文件的内容显示在html网页中

6

运行之后的效果,见下图

7

完成的html代码                 js如何读取json文件                    

 

8

json文件内容{    'person':[        { 'name': '云天河'   , 'image' : 'tianhe.png' },        { 'name': '韩菱纱'   , 'image' : 'lingsha.png' },        { 'name': '柳梦璃'   , 'image' : 'mengli.png' },        { 'name': '慕容紫英' , 'image' : 'ziying.png' },        { 'name': '云天青' , 'image' : 'tianqing.png' },        { 'name': '夙玉' , 'image' : 'suyu.png' },        { 'name': '玄霄' , 'image' : 'xuanxiao.png' },        { 'name': '夙瑶' , 'image' : 'suyao.png' },        { 'name': '太清' , 'image' : 'taiqing.png' },        { 'name': '宗炼' , 'image' : 'zonglian.png' },        { 'name': '婵幽' , 'image' : 'chanyou.png' },        { 'name': '奚仲' , 'image' : 'xizhong.png' },        { 'name': '归邪' , 'image' : 'guixie.png' }    ]}

总结

1.使用js原生 XMLHttpRequest的方法来读取json2.将读取后的json内容打印到页面中

推荐信息