如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
js如何读取json文件
来源：互联网
2023-03-16 19:16:41 302
js如何读取json文件
工具/原料
- js
- json文件
- vscode
方法/步骤
先准备一个json文件
使用vscode创建一个html文件
开始撰写js方法
使用原生javascript来处理
先处理读取json文件
之后运行这个html
上一步得到的json就是我们index.json文件中的内容
在开发者工具中就能看到显示的数据
为了便于查看我们json文件的内容显示在html网页中
运行之后的效果，见下图
完成的html代码
!DOCTYPEhtml>
htmllang="en">
head>
metacharset="UTF-8">
metaname="viewport"content="width=device-width,initial-scale=1.0">
metahttp-equiv="X-UA-Compatible"content="ie=edge">
title>js如何读取json文件/title>
script>
window.onload=function(){
varurl="index.json"
varrequest=newXMLHttpRequest();
request.open("get",url);
request.send(null);
request.onload=function(){
if(request.status==200){
varjson=JSON.parse(request.responseText);
//console.log(json);
varol=document.getElementById('ol');
json.person.map(person=>{
varli=document.createElement("li");
li.innerHTML=`名字是${person.name}图片是${person.image}`;
ol.append(li);
})
}
}
}
/script>
/head>
body>
olid="ol">
/div>
/body>
/html>
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的方法来读取json
2.将读取后的json内容打印到页面中
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
上一篇：html联动下拉框怎么做 下一篇：前端入门指南
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 436 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)