[ajax查]用XMLHttpRequest查看用户列表

HTML代码

<h1>main.html管理员首页</h1>
    <table border="1" width="80%" >
        <thead>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>电话</td>
                <td>是否是会员</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="msg"></tbody>
    </table>

JavaScript代码

   <script>
        console.log(1);
        /*
        1.创建表格标签 table thead tbody
        */
       //1.创建xhr对象
       var xhr=new XMLHttpRequest();
       //2.打开网络连接 open
       xhr.open('GET','http://127.0.0.1:3000/admin/list',true);
       console.log(2);
       //3.发送请求
       xhr.send();
       //4.接收服务器返回数据
       //4.1为xhr绑定事件onreadystatechange
       xhr.onreadystatechange=function(){
           console.log(3);
           //4.2判断readyState===4 status===200
           if(xhr.readyState===4 && xhr.status===200){
                
                console.log(4);
                //4.3接收数据
                console.log(xhr.responseText);
                //4.4:将json字符串转js对象
                var obj=JSON.parse(xhr.responseText);
                //注意obj.data才是数组
                console.log(obj.data);
                //4.5创建变量保存空字符串
                var str='';
                //4.6创建循环遍历js对象
                for(var i=0;i<obj.data.length;i++){
                    //4.6.1转一下对象
                    var item=obj.data[i]
                    //4.6.2 拼字符串
                    str+=`
                    <tr>
                        <td>${item.u_id}</td>      
                        <td>${item.u_names}</td>
                        <td>${item.u_phone}</td> 
                        <td>${item.u_member===1?'会员':'未加入'}</td>
                        <td>操作</td>               
                    </tr>`
                }
                //4.7将字符串赋值msg.innerHTML 
                   msg.innerHTML=str;
           }
       };  
    </script>

结果截图