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

标题: 赵强-20221130-Ajax02 [打印本页]

作者: BlueFlame 时间: 2022-12-1 08:45
标题: 赵强-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>
</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>

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