Loading

异步网络原生(ajax)

 
 
 
<!DOCTYPE html>
<html>

 

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="i.css">
</head>

<body>

 
  <table width="400" border="1" align="center" bordercolor="#ff8600">
    <thead>
      <tr>
        <th colspan="5">
          <input type="text" placeholder="请输入查询的名字" id="uname">
          <button id="query" class="kyle">
            点击查询
          </button>
        </th>
      </tr>
      <tr style="text-align: left;">
        <th>编号</th>
        <th>姓名</th>
        <th width="126">电话</th>
        <th>会员</th>
        <th>删除</th>
      </tr>
    </thead>
　　// 插入 拿到数据后的格式
    <tbody id="container" style="text-align: left;border-collapse: collapse;">
    </tbody>
 
  </table>
</body>
<script>
  let container = document.getElementById("container");
  let query = document.getElementById("query");
  let uname = document.getElementById("uname");
  // 监听按钮是否被点击
  query.onclick = function () {
    // 判断输入的是否为空
    if(!uname.value.trim()){
      alert("输入为空！")
      return
    }
    // 如果为空则不会执行到这里,相反不为空执行ajax函数
    ajax()
  }
 

  // 写ajax函数,避免重复编写ajax一些相同的内容

  function ajax() {

    // 创建ajax对象：用于发送请求
    var xhr = new XMLHttpRequest();
　/*　　
　　异步任务（请求）不在主线程中阻塞, 当被调用回调函数的时候才去交给主线程执行
   */
 
    // 监听响应数据 readyState
    // 等于1时 ajax对象被创建出来, var xhr = new XMLHttpRequest();
    // 等于2时 已经建立了请求方式 也就是open(),
    // 等于3时发送请求也就是send(),
    // 等于4时 接受到了请求 
 
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
          var result = JSON.parse(xhr.responseText);
          container.innerHTML = showList(result.data);
        }
      }
    }
    // 创建请求对象
    xhr.open("GET", `/admin/query?u_names=${uname.value}`, true);
    // 发送数据
    xhr.send();
  }
  ajax()

 

  function showList(arr) {
    let s = ""
    for (const index in arr) { // 循环数据 构建页面显示的格式
      s += `
          <tr>
            <td>${arr[index].u_id}</td>
            <td>${arr[index].u_names}</td>
            <td>${arr[index].u_phone}</td>
            <td>${arr[index].u_member}</td>
            <td>
              <button onclick="del(${arr[index].u_id})">删除</button>
            </td>
          </tr>
        `;
    }
    return s //  返回的字符串是要插入到tbody标签的html格式的数据, 数据+格式
  }
 
 

 

 
  function del(u_id){
　　// 判断是不是字符串
      if(isNaN(u_id)){
        return
      }
　　// 实例化XMLHttpRequest 对象
      let xhr = new XMLHttpRequest();
　　// 监听状态 当状态到4 说明已经收到数据
      xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
          if(xhr.status >= 200 && xhr.status < 300){
            var result = JSON.parse(xhr.responseText);
            if (result.code == 1){
              ajax()
              alert("删除成功！！")
             
            }else{
              alert("删除失败！！")
            }
          }
        }
      }
      xhr.open("DELETE",`/admin/del/${u_id}`, true);
      xhr.send();
     

 

    }
   
</script>

 

</html>

 

posted @ 2021-10-12 20:46  guxuanyan  阅读(26)  评论(0)    收藏  举报