ajax显示列表案例一：

最新推荐文章于 2024-02-03 22:59:38 发布

菜鸟小黄

最新推荐文章于 2024-02-03 22:59:38 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： ajax json js

本文链接：https://blog.youkuaiyun.com/weixin_43324141/article/details/105736382

版权

前端专栏收录该内容

16 篇文章

订阅专栏

ajax显示列表案例（利用mock接口测试）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素ajax</title>
</head>
<body>
    <button onclick="getDate()">获取数据</button>

    <table>
        <tr>
            <th>姓名</th>
            <th>生日</th>
            <th>城市</th>
            <th>性别</th>
        </tr>

        <tbody id="myTbody">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    
    <script>
        var myTbody = document.getElementById('myTbody');
        var url = 'https://www.fastmock.site/mock/03f52e44e804257f49e9dd5c48ae3769/study/test';
        function getDate() {
             //1.创建ajax对象
             var myAjax = new XMLHttpRequest();
            //2. 连接   (请求方式，地址，同步false或者异步true)
             myAjax.open("GET", url , true)
            //3.向服务器发送请求（可以传参）
            myAjax.send()// myAjax.send(data)
             //4.服务器响应
             myAjax.onreadystatechange = function () {
            // 4表示走到最后的第四步 readyState 到4  状态为200
               if(myAjax.readyState == 4 && myAjax.status == 200){
                 console.log(myAjax.response);//返回是一个json字符串
                 // 变成json对象  
                 var res = JSON.parse(myAjax.response);
                 //JSON.parse() 将返回的json字符串转换成json对象       
                 // JSON.stringify() 将json对象转换为json字符串
                 console.log(res.user);
                 showDate(res.user);
            }
          }
        }
       
        function showDate(data) {
         var str='';
           //()=>相当于fuction 箭头函数this里面始终指向调用者
         data.forEach( (item,index) => {
            //  循环每一个item
            str+=  `<tr>
                <td>${item.name}</td>
                <td>${item.birthday}</td>
                <td>${item.city}</td>
                <td>${item.sex}</td>
            </tr>`
         })
         myTbody.innerHTML = str;
        }
    </script>
</body>
</html>