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>
相关推荐
普郎特4 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
可观测性用观测云14 分钟前
前端错误可观测最佳实践
前端
恋猫de小郭14 分钟前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
一枚前端小能手35 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码36 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
Cyan_RA942 分钟前
计算机网络面试题 — TCP连接如何确保可靠性?
前端·后端·面试
谢尔登42 分钟前
【CSS】层叠上下文和z-index
前端·css
鹏多多43 分钟前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
AryaNimbus1 小时前
你不知道的 Cursor系列(三):再也不用死记硬背 Linux 命令,终端 Cmd+K 来帮你!
前端·ai编程·cursor
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试