一、学习内容：
<!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>
<input type="text" id="ipt">
<button id="searBtn">搜索</button>
<button id="addBtn">新增</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<script>
const ipt = document.querySelector('#ipt');
const searBtn = document.querySelector('#searBtn');
const addBtn = document.querySelector('#addBtn');
const tbody = document.querySelector('#tbody');
// 查询
// 调用自己封装的ajax的get请求
searBtn.addEventListener('click', function () {
$.post('http://121.89.216.9/show', `id=${ipt.value}`, res => {
let resDate = JSON.parse(res).data;
console.log(resDate);
// 渲染到页面
let html =
`<tr>
<td>${resDate.id}</td>
<td>${resDate.name}</td>
<td>${resDate.age}</td>
<td>${resDate.sex}</td>
<td>${resDate.tel}</td>
<td><button class="edit">编辑</button><button class="del">删除</button></td>
</tr>`;
tbody.innerHTML = html;
})
});
// console.log($);
</script>
</body>
</html>
|
