怎样Json放在script的代码里，并渲染到列表（请求数据的代码最好可以放在script的if里面）
data.txt改为Students.json,代码如下：
[
{
"number":"20180101",
"name":"小格",
"age":18
},
{
"number":"20180102",
"name":"小莱",
"age":19
},
{
"number":"20180103",
"name":"小璐",
"age":20
}
]
页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn"> 获取学生数据</button>
<table>
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- 通过js设置innerHTML显示数据 -->
</tbody>
</table>
</body>
</html>
<script>
// ajax请求的基础：请求的地址，请求的方式
async function getData(url, method = 'GET') {
let result = await new Promise((resolve, rejected) => {
// 建立请求，并获取数据
// 建立请求的对象
const xht = new XMLHttpRequest();
// 建立连接
xht.open(method, url, true);
// 发送数据请求
xht.send(null);
// 判断请求的状态
xht.onreadystatechange = function() {
// 判断请求的过程进行到哪一步
if (xht.readyState == 4) {
if (xht.status == 200) {
// 说明请求和数据以及拿到
resolve(xht.responseText);
} else {
rejected('服务器连接失败');
}
}
}
});
console.log(result);
// 将数据渲染到页面
}
// 调用分装异步请求的数据
getData('data.txt');
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn"> 获取学生数据</button>
<table>
<caption>学生信息表</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- 通过js设置innerHTML显示数据 -->
</tbody>
</table>
</body>
</html>
<script>
// ajax请求的基础：请求的地址，请求的方式
async function getData(url, method = 'GET') {
let result = await new Promise((resolve, rejected) => {
// 建立请求，并获取数据
// 建立请求的对象
const xht = new XMLHttpRequest();
// 建立连接
xht.open(method, url, true);
// 发送数据请求
xht.send(null);
// 判断请求的状态
xht.onreadystatechange = function() {
// 判断请求的过程进行到哪一步
if (xht.readyState == 4) {
if (xht.status == 200) {
// 说明请求和数据以及拿到
resolve(xht.responseText);
} else {
rejected('服务器连接失败');
}
}
}
});
let html = ''
const data = JSON.parse(result)
data.forEach(item=>{
html+=`<tr><td>${item.number}</td><td>${item.name}</td><td>${item.age}</td></tr>`
})
document.getElementsByTagName('tbody')[0].innerHTML = html
// console.log(result);
// 将数据渲染到页面
}
// 调用分装异步请求的数据
getData('data.json');
</script>
js使用for循环遍历数据，生成dom元素，在添加到页面中
这个不就是利用JSON.parse解析后，再渲染就行了吗？