今日所学内容：
<!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>
<input type="text" id="ipt">
<button id="btn1">查询</button>
<button id="dis">显示</button>
<button id="blo">隐藏</button>
<div>
用户名：<input type="text" id="userName" autofocus>
</div>
<div>
年龄：<input type="text" id="age" >
</div>
<div>
手机号：<input type="text" id="tel">
</div>
<div>
性别：<input type="text" id="sex" >
</div>
<div>
密码：<input type="password" id="pwd" >
</div>
<div>
<button id="btn">提交</button>
</div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script>
//获取dom节点
const tbody = document.querySelector('#tbody');
const table = document.querySelector('table');
const userName = document.querySelector('#userName');
const age = document.querySelector('#age');
const tel = document.querySelector('#tel');
const sex = document.querySelector('#sex');
const pwd = document.querySelector('#pwd');
const btn = document.querySelector('#btn');
const dis = document.querySelector('#dis');
const blo = document.querySelector('#blo');
dis.addEventListener('click',function(){
getStuList();
table.style.display = 'block';
tbody.style.display = 'block';
});
blo.addEventListener('click',function(){
table.style.display = 'none';
tbody.style.display="none";
})
function getStuList(){
//发送请求
//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.open()
xhr.open('get','http://121.89.216.9/list');
//3.send()
xhr.send();
//readyState状态判断
xhr.onreadystatechange = function(){
//判断状态为4
if(xhr.readyState == 4){
if(JSON.parse(xhr.responseText).code == 0){
let stuList = JSON.parse(xhr.responseText).data;
console.log(stuList);
//渲染
//遍历
let html = '';
stuList.forEach(function(item,index){
// console.log(item.id);
html +=
`<tr data-index=${item.index}>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.sno}</td>
<td>${item.age}</td>
<td>${item.sex}</td>
<td>${item.tel}</td>
</tr> `
});
tbody.innerHTML = html;
}
}
}
}
btn1.addEventListener('click',function(){
let id = ipt.value;
//发送ajax请求
var xhr = new XMLHttpRequest();
xhr.open('get',`http://121.89.216.9/show?id=${id}`);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
let res = JSON.parse(xhr.responseText).data;
let html =
`<tr data-index=${res.index}>
<td>${res.id}</td>
<td>${res.name}</td>
<td>${res.sno}</td>
<td>${res.age}</td>
<td>${res.sex}</td>
<td>${res.tel}</td>
</tr>` ;
document.querySelector('#tbody').innerHTML = html;
}
}
});
btn.addEventListener('click',function(){
//表单内容非空验证
if(Boolean(!!userName.value)&&Boolean(!!age.value)&&Boolean(!!tel.value)&&Boolean(!!sex.value)&&Boolean(!!pwd.value)){
//发送请求
url=`http://121.89.216.9/create?name=${userName.value}&age=${age.value}&sex=${sex.value}&password=${pwd.value}&tel=${tel.value}`;
var xhr = new XMLHttpRequest();
xhr.open('get',url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//返回数据
if(JSON.parse(xhr.responseText).mes == '成功'){
//跳转页面---列表
// window.location.href = './03-综合案例.html';
getStuList();
}
}
}
}
})
</script>
</body>
</html>
|
