成都企业网站营销设计,ui设计学校,东莞保安公司有哪些,怎样进网站ftphtml获取网络数据#xff0c;列表展示 第二种 js遍历json数组中的json对象 image.png || - 判断数据是否为空#xff0c;为空就显示 - !DOCTYPE html
htmlheadmeta charsetutf-8title网页列表/titlescript …html获取网络数据列表展示 第二种 js遍历json数组中的json对象 image.png || - 判断数据是否为空为空就显示 - !DOCTYPE html
htmlheadmeta charsetutf-8title网页列表/titlescript typetext/javascript// https://api.thecatapi.com/v1/images/search?limit2// // {// 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?limit2, true);xhr.send(); //发送请求// 监听请求的状态xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {// 请求成功后的处理console.log(111 111 返回的数据, xhr.responseText);var imgurlStr ;// // 打印获取json里的对象var data2 JSON.parse(xhr.responseText);data2.forEach(item {imgurlStr div id${item.id} div${item.id}/divimg stylewidth: 100px; height: 100px; src${item.url} alt width ${item.width}px height${item.height}px/div})document.getElementById(listID).innerHTML imgurlStr;}};/script/headbodydiv idlistID /div/body/html 或这样 image.png data2.forEach((item, index) {imgurlStr div id${item.aJZT}-${index} stylemargin-bottom:20px;border-radius:10px;border:1px solid #ddd; div styleborder: 1px #f2f2f2 double; margin: 12px;div classcell2 stylefont-weight:bold;font-size:30px;div classcell-lab某某时间/divdiv classcell-val idcXSJ${item.cXSJ|| -}/div/divdiv classcelldiv class cell-lab某某状态/divdiv classcell-val idaJZT${item.aJZT || -}/div/div/div/div})