菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 巨朝阳-20221130-Ajax02 [打印本页]

作者: 云云 时间: 2022-12-1 09:02
标题: 巨朝阳-20221130-Ajax02
<!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>

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)