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

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

news 2025/9/13 23:35:16

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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/9/9 3:27:31

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/8/25 23:31:20

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/9/9 15:02:38

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2025/8/25 22:27:27

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2025/8/22 7:03:09

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2025/6/16 23:36:50

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/9/12 13:41:18

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/9/1 12:32:50

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/9/5 22:23:44

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/9/7 15:02:04