采用 XMLHttpRequest 读取。
1. new 初始化 XMLHttpRequest
2. open 设置请求方式,地址
3. send 发起请求
4.onload 请求成功,返回结果
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js如何读取json文件</title>
<script>
window.onload = function () {
var url = "index.json"
var request = new XMLHttpRequest();
request.open("get", url);
request.send(null);
request.onload = function () {
if (request.status == 200) {
var json = JSON.parse(request.responseText);
var ol = document.getElementById('ol');
var frag = document.createDocumentFragment();
json.person.map(person => {
var li = document.createElement("li");
li.innerHTML = `名字是 ${person.name} 图片是 ${person.image}`;
frag.append(li);
})
ol.append(frag)
}
}
}
</script>
</head>
<body>
<div>
<ol id="ol">
</div>
</body>
</html>
数据:
{
"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" }
]
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)