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

标题: 毛少涵2023-1-6 [打印本页]

作者: 微小星晨 时间: 2023-1-9 22:04
标题: 毛少涵2023-1-6
<body>
<table>
   <thead>
      <tr>
      <th>id</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>电话</th>
      
      </tr>
   </thead>
   <tbody>
      <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      </tr>
   </tbody>
</table>
<script>
   function renderlist() {
      //发送ajax--接收响应数据

      var xhr = new XMLHttpRequest();
      // xhr.open("get", "http://162.14.107.109/list");
      xhr.open("post", "http://162.14.107.109/list");
      xhr.send();

      //监听事件--onr eadystatechange
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
         console.log(JSON.parse(xhr.responseText));
         // document.querySelector('tbody')
         // console.log();
         let stuList = JSON.parse(xhr.responseText).data.data;
         //
         let html = "";
         stuList.forEach((v) => {
         // console.log(v);
            html += `
                     <tr>
            <td>${v.id}</td>
            <td>${v.name}</td>
            <td>${v.age}</td>
            <td>${v.sex}</td>
            <td>${v.tel}</td>
         </tr>`;
         });
         document.querySelector('tbody').innerHTML=html
      }
      };

      //tbody中渲染
   }
   renderlist();
</script>

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