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

html获取网络数据，列表展示 一

news 2026/5/25 16:04:48

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].urladdImg.style.width = "200px";addImg.style.height = "200px";myDiv.append(addImg)let addName = document.createElement('p')addName.innerText = data2[i].idmyDiv.append(addName)}}};</script></body>
</html>

相关文章：

html获取网络数据，列表展示 一

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

编程日记 2023/11/2 0:58:49

配置管理工具-Confd

1 简介 1.1 Confd介绍 Confd是一个轻量级的配置管理工具。通过查询后端存储&#xff0c;结合配置模板引擎&#xff0c;保持本地配置最新&#xff0c;同时具备定期探测机制&#xff0c;配置变更自动reload。对应的后端存储可以是etcd&#xff0c;redis、zookeeper等。[1] 通过…...

编程日记 2023/11/2 0:56:47

0基础学习PyFlink——使用DataStream进行字数统计

大纲 sourceMapSplittingMapping ReduceKeyingReducing 完整代码结构参考资料 在《0基础学习PyFlink——模拟Hadoop流程》一文中&#xff0c;我们看到Hadoop在处理大数据时的MapReduce过程。 本节介绍的DataStream API&#xff0c;则使用了类似的结构。 source 为了方便&…...

编程日记 2023/11/2 0:55:46

OpenCV官方教程中文版 —— 图像去噪

OpenCV官方教程中文版 —— 图像去噪 前言一、原理二、OpenCV 中的图像去噪1.cv2.fastNlMeansDenoisingColored()2.cv2.fastNlMeansDenoisingMulti() 前言 目标 • 学习使用非局部平均值去噪算法去除图像中的噪音 • 学习函数 cv2.fastNlMeansDenoising()&#xff0c;cv2.fa…...

编程日记 2023/11/2 0:54:45

AcWing 102. 最佳牛围栏（前缀和+二分+DP）

AcWing 102. 最佳牛围栏 1、问题 2、分析 &#xff08;1&#xff09;暴力做法 看到这道题以后&#xff0c;我们可以先想一个最暴力的做法&#xff0c;就是我们去枚举所有长度至少为 F F F的区间&#xff0c;然后求出这个区间的和&#xff0c;再求出这个区间的平均值。最后在…...

编程日记 2023/11/2 0:53:43

React-表单受控绑定和获取Dom元素

一、表单受控组件 1.声明一个react状态 说明&#xff1a;useState const [value,setValue]useState("") 2.核心绑定流程 2.1绑定react状态 <div><input value{value}type"text"></input> 2.2绑定onChange事件 说明&#xff1a;e.…...

编程日记 2023/11/2 0:52:42

python hashlib模块及实例

hashlib 模块密码加密密码撞库密码加盐 一&#xff0c;hashlib模块 hashlib模块是用来为字符串进行加密的模块&#xff0c;通过该作用就可以为用户的密码进行加密。 通过模块中的hash算法可以为任意长度的字符串加密成长度相同的一串hash值。该hash算法得到的hash值有一下几个…...

编程日记 2023/11/2 0:51:41

垃圾回收GC

为什么要有垃圾回收? JVM之所以要有垃圾回收,是因为它能够自动管理内存,避免内存泄漏和内存溢出的问题,垃圾回收机制会自动检测和清理不再使用的对象,释放内存空间,使得开发者不需要手动管理内存,降低了开发难度和错误风险,同时,垃圾回收还可以优化内存分配,提高程序性能和响…...

编程日记 2023/11/2 0:50:40

kubernetes-service微服务

目录 一、service微服务 二、Ipvs模式 三、ClusterIP 1.ClusterIP 2.headless 四、NodePort 1.NodePort 2.默认端口 五、LoadBalancer 1.LoadBalancer 2.metallb 六、ExternalName 一、service微服务 Kubernetes Service微服务是一种基于Kubernetes的微服务架构&…...

编程日记 2023/11/2 0:49:39

让你笑到不行的笑话短视频接口，快来试试！

11在当今这个快节奏的社会中&#xff0c;笑话成为了许多人调节情绪的有效方法。如今&#xff0c;短视频平台已经成为了最受欢迎的娱乐方式之一&#xff0c;因此&#xff0c;将笑话和短视频结合起来&#xff0c;成为了一种很有趣的方式来带给我们欢乐。今天我们要介绍的是挖数据…...

编程日记 2023/11/2 0:48:38

系列四十五、Spring的事务传播行为案例演示（五）#MANDATORY

一、演示Spring的传播行为&#xff08;MANDATORY&#xff09; 1.1、StockServiceImplMANDATORY /*** Author : 一叶浮萍归大海* Date: 2023/10/30 15:43* Description: 演示MANDAORY的传播行为* 外部不存在事务&#xff1a;抛出异常 No existing transaction found for…...

编程日记 2023/11/2 0:46:37

idea插件（二）-- String Manipulation（字符串处理工具）

目录 1. 安装 String Manipulation 2. 默认快捷键 3. 操作说明 3.1 变量名的形式处理 3.2 文本形式的转化...

编程日记 2023/11/2 0:45:36

HQChart实战教程67-worker批量计算股票指标

HQChart实战教程67-worker批量计算股票指标 什么是Worker批量指标计算示例地址步骤1. 创建一个后台工作线程类2. 发送指标计算任务3. 接收计算结果数据对接 完整源码demo_workerthread_sina.htmlhqchart_worker_sina.js HQChart插件源码地址 什么是Worker Worker 接口是 Web W…...

编程日记 2023/11/2 0:44:35

博客系统自动化测试项目实践

文章目录 一.测试需求分析1.功能分析2.非功能分析 二.制定测试方案&#xff08;计划 策略&#xff09;三.编写测试用例四.执行自动化测试用例五.编写测试报告六.项目总结 一.测试需求分析 1.功能分析 通过功能测试需求分析 2.非功能分析 非功能分析主要从:界面,性能,安全性,…...

编程日记 2023/11/2 0:43:34

软考高级之系统架构师系列之操作系统基础

概念 接口 操作系统为用户提供两类接口&#xff1a;操作一级的接口和程序控制一级的接口。操作一级的接口包括操作控制命令、菜单命令等&#xff1b;程序控制一级的接口包括系统调用。 UMA和NUMA UMA&#xff0c;统一内存访问&#xff0c;Uniform Memory Access&#xff0c…...

编程日记 2023/11/2 0:40:30

制作一个可以arm架构下运行的docker镜像（for Python）

看完本篇文章&#xff0c;你将得到一个可以arm架构下运行的python 基础镜像。 题外话 这里直接说docker镜像有点儿草率&#xff0c;因为目前很多容器都是Podman了。 podman的介绍 arm和aarch傻傻分不清楚 现在这两个是一样的意思了。 arm64和aarch64之间的区别 开始制作镜…...

编程日记 2023/11/2 0:39:29

Goland连接服务器/虚拟机远程编译开发

创建SSH连接 SSH用于与远程服务器建立连接 Settings -> Tools -> SSH Configurations 添加新的ssh连接&#xff0c;Host为ip地址&#xff0c;Username为用户名&#xff0c;认证方式这里选择密码验证 全部填完后可以点击Test Connection测试连接是否成功 创建Deployment…...

编程日记 2023/11/2 0:38:28

大数据Doris（十四）：Doris表中的数据基本概念

文章目录 Doris表中的数据基本概念 一、​​​​​​​Row & Column...

编程日记 2023/11/2 0:37:26

【Linux】Linux环境配置以及部署项目后端

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Linux的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Linux环境配置 1.JDK ①上传安装包到…...

编程日记 2023/11/2 0:36:26

RabbitMQ消费者的可靠性

目录 一、消费者确认 二、失败重试机制 2.1、失败处理策略 三、业务幂等性 3.1、唯一消息ID 3.2、业务判断 3.3、兜底方案 一、消费者确认 RabbitMQ提供了消费者确认机制&#xff08;Consumer Acknowledgement&#xff09;。即&#xff1a;当消费者处理消息结束后&#x…...

编程日记 2023/11/2 0:35:24

告别Appium！用Python+UIAutomator2搞定Android自动化测试（附完整环境搭建与实战代码）

PythonUIAutomator2&#xff1a;Android自动化测试的高效实践指南 在移动应用测试领域&#xff0c;效率与稳定性始终是工程师们追求的核心目标。传统方案如Appium虽然功能全面&#xff0c;但在执行速度和资源消耗方面往往难以满足高频测试需求。本文将带您探索基于Python和UIA…...

编程新知 2026/5/25 15:58:19

热电效应自发电自行车灯：利用体温实现免充电照明的工程实践

1. 项目概述&#xff1a;从人体体温到自行车灯光你有没有想过&#xff0c;骑自行车时身体散发出的热量&#xff0c;除了让你出汗&#xff0c;还能干点什么&#xff1f;这个项目就是把我们骑车时产生的“废热”&#xff0c;变成照亮前路的灯光。听起来有点像科幻情节&#xff0c…...

编程新知 2026/5/25 14:31:50

eqMac终极指南：macOS系统级音频均衡器免费使用教程

eqMac终极指南&#xff1a;macOS系统级音频均衡器免费使用教程 【免费下载链接】eqMac macOS System-wide Audio Equalizer & Volume Mixer &#x1f3a7; 项目地址: https://gitcode.com/gh_mirrors/eq/eqMac 你是否曾经觉得Mac电脑的音质不够理想&#xff1f;想要…...

编程新知 2026/5/25 13:35:28

机器学习进化算法与新奇性搜索在暗物质模型参数空间扫描中的应用

1. 项目概述与核心挑战在粒子物理和宇宙学的前沿&#xff0c;寻找暗物质候选者是一场旷日持久的“寻宝”游戏。我们面对的“藏宝图”是各种理论模型&#xff0c;比如二重希格斯模型&#xff08;2HDM&#xff09;及其扩展&#xff0c;而“宝藏”则是那些能让模型预言与所有实验观…...

编程新知 2026/5/25 11:49:55

别再只会用strlen了！CAPL脚本字符串处理实战：从CAN报文解析到日志生成

CAPL脚本字符串处理实战&#xff1a;从CAN报文解析到日志生成在汽车电子测试领域&#xff0c;CAPL脚本是工程师们不可或缺的利器。面对复杂的CAN总线数据流&#xff0c;字符串处理能力往往决定了脚本的效率和可靠性。本文将带您超越基础API的简单调用&#xff0c;探索如何组合运…...

编程新知 2026/5/25 11:41:59

网盘限速困扰？3步实现全平台文件下载效率革命性提升

网盘限速困扰&#xff1f;3步实现全平台文件下载效率革命性提升 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云…...

编程新知 2026/5/25 11:39:21

如何快速搭建Windows虚拟路由器：VirtualRouter完整使用指南

如何快速搭建Windows虚拟路由器&#xff1a;VirtualRouter完整使用指南 【免费下载链接】VirtualRouter Wifi Hotspot for Windows computers (Windows 7, 8.x, Server 2012 and newer!) 项目地址: https://gitcode.com/gh_mirrors/vi/VirtualRouter VirtualRouter是一款…...

编程新知 2026/5/25 9:30:02

算法复杂度：那些神秘符号背后的故事

&#x1f52c; 算法复杂度&#xff1a;那些神秘符号背后的故事 &#x1f4d6; 开篇&#xff1a;为什么需要这套"数学语言"&#xff1f; 想象一下&#xff0c;你要向朋友描述不同汽车的油耗&#xff1a; ❌ 没有统一标准&#xff1a; “我的车挺省油的”“他的车特别费…...

编程新知 2026/5/25 9:04:34

从CentOS迁移到openEuler？手把手教你在vSphere ESXi 7.0上搭建测试环境

从CentOS迁移到openEuler&#xff1a;vSphere ESXi 7.0测试环境全指南当企业技术栈面临升级换代时&#xff0c;系统管理员往往需要在不影响生产环境的前提下进行充分验证。对于长期依赖CentOS/RHEL生态的用户而言&#xff0c;openEuler作为国产开源操作系统的代表&#xff0c;正…...

编程新知 2026/5/25 7:51:21

匿名内部类的使用场景 java反射机制

一、匿名内部类的使用场景匿名内部类是一种没有显式类名、直接在创建对象时定义并实例化的内部类。它通常用于“一次性使用”的场景&#xff0c;让代码更简洁紧凑。主要使用场景包括&#xff1a;1. 事件监听器&#xff08;GUI 编程&#xff09;在 Swing、AWT 或 Android 开发中…...

编程新知 2026/5/25 7:49:20