当前位置： 首页 > news >正文

html获取网络数据，列表展示 第二种

news 2026/2/7 13:20:33

html获取网络数据，列表展示 第二种
js遍历json数组中的json对象

image.png

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

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网页列表</title><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);var imgurlStr = "";// // 打印，获取json里的对象var data2 = JSON.parse(xhr.responseText);data2.forEach(item => {imgurlStr += `<div id="${item.id}"> <div>${item.id}</div><img style="width: 100px; height: 100px;" src="${item.url}" alt="" width=" ${item.width}px" height="${item.height}px"></div>`})document.getElementById("listID").innerHTML = imgurlStr;}};</script></head><body><div id="listID"> </div></body></html>

或这样

image.png

                data2.forEach((item, index) => {imgurlStr += `<div id="${item.aJZT}-${index}" style="margin-bottom:20px;border-radius:10px;border:1px solid #ddd;"> <div style="border: 1px #f2f2f2 double; margin: 12px;"><div class="cell2" style="font-weight:bold;font-size:30px;"><div class="cell-lab">某某时间</div><div class="cell-val" id="cXSJ">${item.cXSJ|| '-'}</div></div><div class="cell"><div class=" cell-lab">某某状态</div><div class="cell-val" id="aJZT">${item.aJZT || '-'}</div></div></div></div>`})

相关文章：

html获取网络数据，列表展示 第二种

html获取网络数据&#xff0c;列表展示 第二种 js遍历json数组中的json对象 image.png || - 判断数据是否为空&#xff0c;为空就显示 - <!DOCTYPE html> <html><head><meta charset"utf-8"><title>网页列表</title><script …...

编程日记 2023/10/31 1:56:57

【Python 算法】信号处理通过陷波滤波器准确去除工频干扰

对于一个信号来说通常汇入工频噪声往往是因为交流电产生的电泳&#xff0c;影响了我们信号采集导致信号上存在工频干扰。 那么matlab去除工频干扰可以通过陷波滤波器实现。 通常使用scipy.signal实现信号的处理。 Scipy的信号处理模块&#xff08;scipy.signal&#xff09;来创…...

编程日记 2023/10/31 1:55:56

Redis（08）| 线程模型

一、redis 的线程模型 redis 内部使用文件事件处理器 file event handler&#xff0c;它是单线程的&#xff0c;所以redis才叫做单线程模型。它采用IO多路复用机制同时监听多个 socket&#xff0c;将产生事件的 socket 压入内存队列中&#xff0c;事件分派器根据 socket 上的事…...

编程日记 2023/10/31 1:53:54

Java14-16新特性

目录 一、Java14新特性 1、instanceof模式匹配 2、友好的空指针(NullPointerException)提示 3、record类型 二、Java15新特性 1、Sealed Classes 2、CharSequence新增方法 3、TreeMap新增方法 4、文本块 5、无需配置环境变量 三、Java16新特性 1、包装类构造方法的…...

编程日记 2023/10/31 1:52:51

中兴再推爆款，双2.5G网口的巡天AX3000Pro+仅需299元

10月30日消息,中兴新款路由器中兴巡天AX3000Pro将于10月31日20:00正式开售,当前可在天猫、京东及红魔商城进行预约,首发价格299元。 据了解,中兴巡天AX3000Pro是中兴智慧家庭推出的巡天系列新品,也是当前市场上唯一一款300元价位内配备双2.5G网口的路由器。 中兴巡天AX3000Pro…...

编程日记 2023/10/31 1:51:50

【系统架构】架构风格专题

目录 1、定义 2、通用架构风格分类 3、架构风格比较 4、示例&#xff1a;管道-过滤 VS 数据仓库&#xff09;比较因素分析 1、定义 架构风格&#xff1a;描述某一特定应用领域中系统组织方式的惯用模式&#xff0c;反映了领域中众多系统所共有的结构和语义特性&#xff0c…...

编程日记 2023/10/31 1:49:47

【Qt】盒子布局、网格布局、表单布局和堆栈布局

盒子布局 QBoxLayout可以在水平方向或垂直方向上排列控件&#xff0c;分别派生了QHBoxLayout、QVBoxLayout子类。 QHBoxLayout&#xff1a;水平布局&#xff0c;在水平方向上排列控件&#xff0c;即&#xff1a;左右排列。QVBoxLayout&#xff1a;垂直布局&#xff0c;在垂直…...

编程日记 2023/10/31 1:48:47

GO语言，半自动打怪

仅供学习参考&#xff0c;切勿用于商业用途 package mainimport ("fmt""github.com/go-vgo/robotgo""math/rand""time" )const (taskNum 7 )type Task struct {Name stringSleepTime1 intSleepTime2 intFunc func() }fu…...

编程日记 2023/10/31 1:47:46

【Java 进阶篇】Java登录案例详解

登录是Web应用程序中常见的功能&#xff0c;它允许用户提供凭证&#xff08;通常是用户名和密码&#xff09;以验证其身份。本文将详细介绍如何使用Java创建一个简单的登录功能&#xff0c;并解释登录的工作原理。我们将覆盖以下内容&#xff1a; 登录的基本概念创建一个简单的…...

编程日记 2023/10/31 1:46:45

Vue 菜单导航栏，轮播图

导航菜单栏结构和样式代码实现 一级导航栏 views/HomeView.vue <template><div><Shortcut></Shortcut><Header></Header><div class"inner"><Navigation></Navigation></div><div>我是主页&l…...

编程日记 2023/10/31 1:44:43

讲述为什么要学习Adobe XD以及 Adobe XD下载安装

首先 我们要了解 Adobe XD 是个什么东西 XD是Adobe公司专门开发出来面向交互、界面设计的矢量绘图工具。 然后是 他可以做什么&#xff1f; 最基本的 可以做UI界面设置 所有 手机 平板 电脑等设备的UI界面 我们都可以通过XD完成 还有就是原型设置 我们可以做各种界面图 还有…...

编程日记 2023/10/31 1:43:41

Netty复习：（1）Http server: hello world

一、加依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.72.Final</version></dependency>二、创建自定义的handler package cn.edu.tju.handler;import io.netty.buffer.ByteB…...

编程日记 2023/10/31 1:41:38

【Python 千题 —— 基础篇】加法计算

题目描述 题目描述 编写一个程序&#xff0c;接受用户输入的两个数字&#xff0c;然后计算这两个数字的和&#xff0c;并输出结果。 输入描述 输入两个数字&#xff0c;用回车隔开两个数字。 输出描述 程序将计算这两个数字的和&#xff0c;并输出结果。 示例 示例 ① …...

编程日记 2023/10/31 1:37:30

基于纵横交叉算法的无人机航迹规划-附代码

基于纵横交叉算法的无人机航迹规划 文章目录 基于纵横交叉算法的无人机航迹规划1.纵横交叉搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用纵横交叉算法来优化无人机航迹规划。 …...

编程日记 2023/10/31 1:36:29

D-Bus：数据类型

D-Bus中描述接口的属性和方法，有其自己定义的一套签名描述方式： 数据类型描述符号对应C++数据类型avector/array数组, ai表示的是vector<int32_t>bboolddouble双精度浮点数iint32_t，32位有符号整数nint16_t，16位有符号整数oobject_path对象路径quint16_t，16位无符号…...

编程日记 2023/10/31 1:34:28

BI零售数据分析，告别拖延症，及时掌握一线信息

在日常的零售数据分析中&#xff0c;经常会因为数据量太大&#xff0c;分析指标太多且计算组合多变而导致数据分析报表难产&#xff0c;零售运营决策被迫拖延症。随着BI数据可视化分析技术的发展&#xff0c;智能化、可视化、自助分析的BI数据分析逐渐成熟&#xff0c;形成一套…...

编程日记 2023/10/31 1:33:25

[BUUCTF NewStarCTF 2023 公开赛道] week4 crypto/pwn

再补完这个就基本上完了. crypto RSA Variation II Schmidt-Samoa密码系统看上去很像RSA,其中Npqq, 给的eN给了d from secret import flag from Crypto.Util.number import *p getPrime(1024) q getPrime(1024)N p*p*qd inverse(N, (p-1)*(q-1)//GCD(p-1, q-1))m bytes…...

编程日记 2023/10/31 1:31:23

论文范文：论基于架构的软件设计方法及应用

注意：范文只适用于帮助大家打开写作思路，并不能作为素材直接用于平时练习、考试中。考试中直接使用范文的素材，会有被认定为雷同卷的风险。 摘要: 2022年4月，本人所在单位计划研发生态集装箱管理控制平台项目。该平台主要用于与现有公司生态集装箱产品做对接，达到远程控制…...

编程日记 2023/10/31 1:30:22

C语言 指针进阶笔记

p和*p: 如图&#xff0c;p是指针&#xff0c;指针存放着地址&#xff0c;打印出来应该是数组的值 *p是指针里里面的元素 #include<stdio.h> int main() {int a1;int b2;int c3;int p[3]{a,b,c};printf("%d",*p); return 0; } 那么现在的打印结果应该为数组的…...

编程日记 2023/10/31 1:29:21

数据库认证 | Oracle OCP好考吗

数据库对于很多技术人员来说都不陌生&#xff0c;但是你想深入了解的话&#xff0c;那么考个证书也许就是一个不错的选择。 如果能考个Oracle OCP认证的话&#xff0c;那也确实不错。那么Oracle OCP好考吗&#xff1f;下面我们就来了解一下吧。 01 Oracle OCP好考吗 OCP考试还…...

编程日记 2023/10/31 1:26:18

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/6 20:34:30

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/5 3:48:44

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/1/31 6:38:50

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/10/31 21:54:15

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2026/1/30 4:18:53