<body>
<table>
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<!-- <th></th> -->
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
<script>
function renderlist() {
//发送ajax--接收响应数据
var xhr = new XMLHttpRequest();
// xhr.open("get", "http://162.14.107.109/list");
xhr.open("post", "http://162.14.107.109/list");
xhr.send();
//监听事件--onr eadystatechange
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(JSON.parse(xhr.responseText));
// document.querySelector('tbody')
// console.log();
let stuList = JSON.parse(xhr.responseText).data.data;
//
let html = "";
stuList.forEach((v) => {
// console.log(v);
html += `
<tr>
<td>${v.id}</td>
<td>${v.name}</td>
<td>${v.age}</td>
<td>${v.sex}</td>
<td>${v.tel}</td>
</tr>`;
});
document.querySelector('tbody').innerHTML=html
}
};
//tbody中渲染
}
renderlist();
</script> |
|