菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育
标题:
赵强-20221201-Ajaxday03
[打印本页]
作者:
BlueFlame
时间:
2022-12-2 08:58
标题:
赵强-20221201-Ajaxday03
今日所学内容：
<!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>
<script src="./ajax.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
</thead>
<tbody id="tbody1">
<tr>
<td></td>
</tr>
</tbody>
</table>
<script>
const tbody = document.querySelector('#tbody');
//调用自己封装的ajax的get请求
$.get('http://121.89.216.9/list','?page=1',res => {
let resData = JSON.parse(res).data.data;
let html = '';
resData.forEach(item => {
html +=
`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.sex}</td>
<td>${item.tel}</td>
</tr>`;
});
tbody.innerHTML = html;
});
//调用自己封装的ajax的post请求
$.post('http://121.89.216.9/list','page=1',res => {
let resData = JSON.parse(res).data.data;
let html = '';
resData.forEach(item => {
html +=
`<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.sex}</td>
<td>${item.tel}</td>
</tr>`;
});
tbody1.innerHTML = html;
});
</script>
</body>
</html>
欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)
Powered by Discuz! X3.4