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

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

news 2026/2/10 2:01:19

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

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

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

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

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

Redis（08）| 线程模型

一、redis 的线程模型 redis 内部使用文件事件处理器 file event handler，它是单线程的，所以redis才叫做单线程模型。它采用IO多路复用机制同时监听多个 socket，将产生事件的 socket 压入内存队列中，事件分派器根据 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、示例：管道-过滤 VS 数据仓库）比较因素分析 1、定义架构风格：描述某一特定应用领域中系统组织方式的惯用模式，反映了领域中众多系统所共有的结构和语义特性&#xff0c…...

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

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

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

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

GO语言，半自动打怪

仅供学习参考，切勿用于商业用途 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应用程序中常见的功能，它允许用户提供凭证（通常是用户名和密码）以验证其身份。本文将详细介绍如何使用Java创建一个简单的登录功能，并解释登录的工作原理。我们将覆盖以下内容： 登录的基本概念创建一个简单的…...

编程日记 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公司专门开发出来面向交互、界面设计的矢量绘图工具。然后是他可以做什么？ 最基本的可以做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 千题 —— 基础篇】加法计算

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

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

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

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

编程日记 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零售数据分析，告别拖延症，及时掌握一线信息

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

编程日记 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: 如图，p是指针，指针存放着地址，打印出来应该是数组的值 *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好考吗

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

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

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2026/2/8 14:57:14

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/10/27 21:25:04

无法与IP建立连接，未能下载VSCode服务器

如题，在远程连接服务器的时候突然遇到了这个提示。查阅了一圈，发现是VSCode版本自动更新惹的祸！！！ 在VSCode的帮助->关于这里发现前几天VSCode自动更新了，我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2026/1/22 21:24:01

Java-41 深入浅出 Spring - 声明式事务的支持事务配置 XML模式 XML+注解模式

点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

Java 加密常用的各种算法及其选择

在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。一、对称加密算法…...

编程新知 2025/11/22 20:41:02

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器纯前端实现高延迟高流量帧率极低个人demo测试超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...

编程新知 2026/1/31 6:12:33

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效，它能挖掘数据中的时序信息以及语义信息，但是它有一个很大的缺陷——很难并行化。我们可以考虑用CNN来替代RNN，但是…...

编程新知 2026/2/1 7:05:07

大数据学习（132）-HIve数据分析

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性本论文优点：（1）在ALOHA…...

编程新知 2026/1/27 14:18:20

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

相关文章：