静态网站怎么更新数据

今天看到个问题

我不是行业从业者,但目前遇到一个问题
我公司网站为纯静态,除了直接从html里修改文字外能不能这样
建立一个xml或者txt文档,其中有很多信息,例如网站名称,电话,备案号等,一行一行的
我从html里通过什么代码能读取这个xml里指定的内容显示到相应的位置,例如title里等;
这样后期有其他需求,我直接修改这个xml即可,求帮助

这种对于数据安全性不是特别高的纯静态网站中,使用JavaScript来读取JSON文件并在HTML页面中动态显示数据是比较常见做法。这种方法允许你将数据和表示层分离,使得维护和更新变得更为简单。下面举一个简单的例子,来看看怎么在HTML中使用JavaScript读取JSON文件并显示数据,达到动态更新的目的。

首先,创建一个JSON文件(例如data.json),内容如下:

{"siteName": "我的公司","phone": "123-456-7890","recordNumber": "ICP备12345678号"
}

然后,在你的HTML文件中,可以使用以下JavaScript代码来读取JSON文件并显示数据:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>window.onload = function() {fetch('data.json').then(response => response.json()).then(data => {document.title = data.siteName;document.getElementById('site-name').textContent = data.siteName;document.getElementById('phone').textContent = data.phone;document.getElementById('record-number').textContent = data.recordNumber;}).catch(error => console.error('Error:', error));}</script>
</head>
<body><h1 id="site-name"></h1><p>电话: <span id="phone"></span></p><p>备案号: <span id="record-number"></span></p>
</body>
</html>

在这个例子中,我们使用了fetch API来异步获取JSON数据。当数据被成功解析后,我们使用DOM操作将数据插入到相应的HTML元素中。

如果是数组的话,可以按照下面的代码来参考

{"siteName": "我的公司","phone": "123-456-7890","recordNumber": "ICP备12345678号","news": [{"title": "新闻标题一","date": "2023-07-18","summary": "这是新闻一的摘要描述..."},{"title": "新闻标题二","date": "2023-07-17","summary": "这是新闻二的摘要描述..."}]
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title><span id="site-name"></span></title><style>#news-list li {margin-bottom: 1em;}</style><script>window.onload = function() {fetch('data.json').then(response => response.json()).then(data => {document.title = data.siteName;document.getElementById('site-name').textContent = data.siteName;const newsList = document.getElementById('news-list');data.news.forEach(news => {const item = document.createElement('li');item.innerHTML = `<h2>${news.title}</h2><span>${news.date}</span><p>${news.summary}</p>`;newsList.appendChild(item);});}).catch(error => console.error('Error:', error));}</script>
</head>
<body><h1 id="site-name"></h1><ul id="news-list"><!-- 新闻列表将在这里动态生成 --></ul>
</body>
</html>

效果如下
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46520.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java 网络编程(TCP编程 和 UDP编程)

1. Java 网络编程&#xff08;TCP编程 和 UDP编程&#xff09; 文章目录 1. Java 网络编程&#xff08;TCP编程 和 UDP编程&#xff09;2. 网络编程的概念3. IP 地址3.1 IP地址相关的&#xff1a;域名与DNS 4. 端口号&#xff08;port&#xff09;5. 通信协议5.1 通信协议相关的…

40.简易频率计(基于等精度测量法)(3)

&#xff08;1&#xff09;BCD8421码&#xff1a;十进制数字转换成BCD8421码的方法 补零&#xff1a;你需要显示多少位数字&#xff0c;就在前面补上四倍的位宽。比如你要显示一个十进制8位的数字&#xff0c;就在前面补上8*432个零。判断&#xff1a;判断补零部分显示的十进制…

golang 实现负载均衡器-负载均衡原理介绍

go 实现负载均衡器 文章目录 go 实现负载均衡器代码实现介绍负载均衡的核心组件与工作流程核心组件工作流程 总结 算法详细描述&#xff1a;1. 轮询&#xff08;Round Robin&#xff09;2. 最少连接&#xff08;Least Connections&#xff09;3. IP散列&#xff08;IP Hash&…

vue是如何进行监听数据变化的?vue2和vue3分别是什么?vue3为什么要更换?

Vue如何进行监听数据变化的&#xff1f; Vue.js 通过其响应式系统来监听数据变化。这个系统允许你声明式地将数据和 DOM 绑定&#xff0c;一旦数据发生变化&#xff0c;相关的 DOM 将自动更新。Vue 使用以下机制来实现数据的监听和响应&#xff1a; 响应式数据&#xff1a;在 …

叉车指纹一键启动/熄火车辆,“锁”住叉车安全

在现代工业领域&#xff0c;叉车作为重要的物流搬运工具&#xff0c;其安全性和便捷性一直是人们关注的焦点。为此&#xff0c;我们引入了一项技术——叉车指纹一键启动/熄火系统&#xff0c;真正实现了叉车安全的“锁定”。 这项技术不仅仅是简单的启动或关闭车辆的手段&#…

关于OSI七层模型

OSI&#xff08;Open Systems Interconnection&#xff0c;开放系统互连&#xff09;七层模型是一个网络通信的基本框架&#xff0c;用于描述网络中数据传输和通信的过程。 一.OSI的基本概念及原则 OSI是Open System Interconnect的缩写&#xff0c;意为开放式系统互联。其各个…

Axure RP移动端医院在线挂号app问诊原型图模板

医疗在线挂号问诊Axure RP原型图医院APP原形模板&#xff0c;是一款原创的医疗类APP&#xff0c;设计尺寸采用iPhone13&#xff08;375*812px&#xff09;&#xff0c;原型图上加入了仿真手机壳&#xff0c;使得预览效果更加逼真。 本套原型图主要功能有医疗常识科普、医院挂号…

云监控(华为) | 实训学习day3(10)

实现数据的增删改查 SpringBoot框架模式 向送外卖一样理解 写程序 1、准备食材(java bean) 2、菜谱(pojo接口->预制->sql 语句) 3、service处理 4、controller 派送 5、用户请求->页面 一、Spring Boot实现增加 第一步&#xff1a;食材(表),用户增加,这里还是用户…

【.NET全栈】ASP.NET开发Web应用——Web部件技术

文章目录 前言 前言 ASP.NET中的Web组件技术&#xff0c;特别是Web部件&#xff08;Web Parts&#xff09;&#xff0c;是一种用于创建允许终端用户直接通过浏览器修改网页内容、外观和行为的集成式控件集。这些控件提供了丰富的功能和灵活性&#xff0c;使得开发人员能够构建…

【Android studio环境搭建】Android studio连接夜神模拟器

Android studio连接夜神模拟器 一、 步骤 1.下载好Android Studio和夜神模拟器, 2.打开夜神模拟器&#xff0c;找到其安装目录下的 nox_adb.exe文件 3.右键进入cmd命令打开&#xff0c;管理员权限执行下面命令 PS D:\Program Files\Nox\bin> .\nox_adb.exe connect 127.…

拯救SQL Server数据库事务日志文件损坏

在数据库的日常管理中,我们不可避免的会遇到服务器突然断电(没有进行电源冗余),服务器故障或者 SQL Server 服务突然停掉, 头大的是ldf事务日志文件也损毁了,SQL Server服务器起来之后,发现数据库处于"Recovery Pending" 状态。 更麻烦的是该数据库没有任何…

【论文解读】VoxelNeXt: Fully Sparse VoxelNet for 3D Object Detection and Tracking

VoxelNeXt 摘要引言方法Sparse CNN Backbone AdaptationSparse Prediction Head 3D Tracking实验结论 摘要 3D物体检测器通常依赖于手工制作的方法&#xff0c;例如锚点或中心&#xff0c;并将经过充分学习的2D框架转换为3D。因此&#xff0c;稀疏体素特征需要通过密集预测头进…

免费的数字孪生平台助力产业创新,让新质生产力概念有据可依

关于新质生产力的概念&#xff0c;在如今传统企业现代化发展中被反复提及。 那到底什么是新质生产力&#xff1f;它与哪些行业存在联系&#xff0c;我们又该使用什么工具来加快新质生产力的发展呢&#xff1f;今天我将介绍一款为发展新质生产力而量身定做的数字孪生工具。 新…

OpenCv 如何在 Java 中使用

Java 项目引入 OpenCv 环境准备OpenCv介绍下载Maven 安装动态链接库 完成 环境准备 JDK 8 OpenCv 4.0.0 Maven 3.9 Windows 11 OpenCv 介绍 OpenCV&#xff08;开源计算机视觉库&#xff09;是一个功能强大的计算机视觉和机器学习库。它提供了广泛的工具和算法&#xff0c;用…

什么是diff算法?

Diff算法&#xff0c;全称为Difference算法&#xff0c;是一种用于比较和查找两个对象&#xff08;如文本、源代码、数据结构或任何形式的字符串&#xff09;之间差异的算法。它在多个领域有着广泛的应用&#xff0c;包括但不限于前端开发、版本控制系统、协同编辑工具等。以下…

SpringBoot @Validated参数校验与@Aspect切面的兼容处理(参数解密加密示例)

文章目录 一、参数解密加密示例1. 请求示例2. 自定义加密解密注解3. 定义切面,处理参数解密加密总结一、参数解密加密示例 1. 请求示例 /*** 请求解密,响应加密** @param author Author对象* @return 返回加密后的数据 ResponseBody<SecurityResult>格式*/ @PostMapp…

跟ChatGPT学习go语言--int 类型如何转化成string

在 Go 语言中&#xff0c;可以使用 strconv 包中的 Itoa 或 FormatInt 函数将 int 类型转换为 string 类型。下面是具体的示例和详细说明&#xff1a; 使用 strconv.Itoa strconv.Itoa 是最简单的方法&#xff0c;将 int 转换为 string。 package mainimport ("fmt"…

MYSQL中的库表建立基础操作

任务&#xff1a;新建产品库mydb6_product&#xff0c; 新建3张表如下: 一&#xff0c; employees表 &#xff08;1&#xff09;:id&#xff0c;整型&#xff0c;主键 &#xff08;2&#xff09;:name&#xff0c;字符串&#xff0c;最大长度50&#xff0c;不能为空 &#xff…

java通过pdf-box插件完成对pdf文件中图片/文字的替换

需要引入的Maven依赖: <!-- pdf替换图片 --><dependency><groupId>e-iceblue</groupId><artifactId>spire.pdf.free</artifactId><version>5.1.0</version></dependency> java代码: public AjaxResult replacepd…

【Django】网上蛋糕商城后台-类目管理

1.类目管理列表实现 当管理员进入后台管理后&#xff0c;点击类目管理&#xff0c;向服务器发出请求 path(admin/type_list/,viewsAdmin.type_list), # 处理商品分类管理列表请求 def type_list(request):# 读取分页页码try:ym request.GET["ym"]except:ym 1# 查…