<!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>
<style>
div{
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<div>
姓名：<input type="text" id="userName" autofocus>
<span id="tip" style="color:red"></span><br>
密码：<input type="password" id="psw"><br>
手机：<input type="text" id="tel"><br>
年龄：<input type="email" id="age"><br>
性别：<input type="text" id="sex"><br>
查询：<input type="text" id="ipt">
<button id="btn">查询</button>
<button id="add">新增</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>电话</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</div>
<script>
const userName = document.querySelector('#userName');
const psw = document.querySelector('#psw');
const tel = document.querySelector('#tel');
const age = document.querySelector('#age');
const sex = document.querySelector('#sex');
const btn = document.querySelector('#btn');
const add = document.querySelector('#add');
const tip = document.querySelector('#tip');
const tbody = document.querySelector('#tbody');
fn()
function fn() {
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://121.89.216.9/list');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
let shuju = JSON.parse(xhr.responseText);
let src = shuju.data;
let html = ''
// console.log(shuju.code)
if (shuju.code == 0) {
// console.log(11111)
src.forEach(function (item, index) {
html += `
<tr>
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.sex}</td>
<td>${item.age}</td>
<td>${item.son}</td>
<td>${item.tel}</td>
</tr>
`
})
// console.log(html)
tbody.innerHTML = html
}
}
}
}
btn.addEventListener('click',function(){
let id=ipt.value;
// console.log(id)
var cha=new XMLHttpRequest();
cha.open('get',`接口${id}`);
cha.send()
cha.onreadystatechange=function(){
let html=''
if(cha.readyState==4){
if(JSON.parse(cha.responseText).code==0){
let shu=JSON.parse(cha.responseText).data
// console.log(1111111)
html+=`
<tr>
<td>${shu.id}</td>
<td>${shu.name}</td>
<td>${shu.sex}</td>
<td>${shu.age}</td>
<td>${shu.tel}</td>
</tr>
`
}
tbody.innerHTML=html
}
}
})
add.addEventListener('click',function(){
if(!!userName.value&&!!psw.value&&!!tel.value&&!!age.value&&sex.value){
let url=`接口${userName.value}&age=${age.value}&sex=${sex.value}&password=${psw.value}&tel=${tel.value}`
var zeng=new XMLHttpRequest();
zeng.open('get',url);
zeng.send();
zeng.onreadystatechange=function(){
if(zeng.readyState==4){
// console.log(JSON.parse(zeng.responseText))
if(JSON.parse(zeng.responseText).mes=='成功'){
fn()
}
}
}
}
})
</script>
</body>
</html> |
