html获取网络数据,列表展示 一

html获取网络数据,列表展示

js遍历json数组中的json对象

image.png

|| '-' 判断数据是否为空,为空就显示 -

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页列表</title>
    </head>
    <body>

        <div>
            <div style="width: 100px; height: 100px;" id="myDiv"></div>
        </div>

        <script type="text/javascript">
            // https://api.thecatapi.com/v1/images/search?limit=2
            // 
            // {
            //  "id": "1ep",
            //  "url": "https://cdn2.thecatapi.com/images/1ep.jpg",
            //  "width": 448,
            //  "height": 674
            // },


            // 创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
            // XMLHttpRequest对象,而是用的ActiveXObject对象
            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
            xhr.open("get", 'https://api.thecatapi.com/v1/images/search?limit=2', true);
            xhr.send(); //发送请求

            // 监听请求的状态
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功后的处理
                    console.log('111 111 返回的数据', xhr.responseText);

                    // // 打印,获取json里的对象
                    var data2 = JSON.parse(xhr.responseText);
                    let myDiv = document.getElementById("myDiv")
                    let myimg = document.getElementById("myimg")
                    for (var i = 0; i < data2.length; i++) {
                        console.log('ggg 000 返回的数据', data2[i].id + " " + data2[i].url);

                        let addImg = document.createElement('img')
                        addImg.src = data2[i].url
                        addImg.style.width = "200px";
                        addImg.style.height = "200px";
                        myDiv.append(addImg)

                        let addName = document.createElement('p')
                        addName.innerText = data2[i].id
                        myDiv.append(addName)
                    }

                }
            };
        </script>
    </body>
</html>
相关推荐
spmcor11 分钟前
MinIO本地对象存储部署指南
前端
少年纪15 分钟前
前端用 pdf.js 将 PDF 渲染到 Canvas 再转图片,文字消失的坑
前端
RoyLin16 分钟前
TypeScript设计模式:复合模式
前端·后端·typescript
我是天龙_绍19 分钟前
CSS/JS/图片全挂了,部署后页面白屏/资源加载失败?这两个配置项坑了多少人!
前端
我的小月月19 分钟前
SQLFE:网页版数据库(VUE3+Node.js)
前端·后端
小高00720 分钟前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
汤姆Tom21 分钟前
Node.js 版本管理、NPM 命令、与 NVM 完全指南
前端·npm·node.js
Alan5215923 分钟前
Java 后端实现基于 JWT 的用户认证和权限校验(含代码讲解)
前端·后端
RoyLin33 分钟前
TypeScript设计模式:策略模式
前端·后端·typescript
brzhang43 分钟前
为什么说低代码谎言的破灭,是AI原生开发的起点?
前端·后端·架构