讲师中心 微信公众号
AI工具推荐 视频效率加速

如何将数据库的信息显示在html上

落雪吖_1274

落雪吖_1274

发布时间:2026-02-14 20:48:10

|

633人浏览过

|

来源于php中文网

原创

PHP中需用$row['field']取值而非echo $row;Node.js模板传参要解构清晰;fetch需设Content-Type和CORS头;SQL注入与XSS须从首行代码防范。

如何将数据库的信息显示在html上

PHP 里用 mysqli_fetch_assoc() 拿数据,别直接 echo 数组

直接 echo $row 会报 Array to string conversion 警告,因为 PHP 不允许把数组当字符串输出。得一层层取字段值。

常见错误是写成:echo $row; 或 print_r($row) 塞进 HTML 正文里——页面会混入大量调试信息,还可能暴露结构。

  • 正确做法:循环中用 $row['username']、$row['email'] 这种带键名的方式取值
  • 确保 SQL 查询成功再遍历,加 if ($result && mysqli_num_rows($result) > 0) 判断
  • 字段名大小写敏感,数据库里是 user_name,代码里写成 $row['UserName'] 就拿不到

Node.js + Express 中 res.render() 渲染模板时传参要解构清楚

用 EJS 或 Pug 时,后端 res.render('list', { users: rows }),前端模板里必须写 ,不能漏掉 users. 这一层。

容易踩的坑是数据库返回的是二维数组(如 [[1,'alice'],[2,'bob']]),但模板默认期待对象数组([{id:1,name:'alice'}])。这时候要么在查询时用 rows.map(r => ({id:r[0],name:r[1]})) 转换,要么改 SQL 加字段别名(SELECT id AS user_id, name AS full_name FROM users)。

立即学习“前端免费学习笔记(深入)”;

财经HTML高端海报生成
财经HTML高端海报生成

复杂得财经如何变成清晰,适合手机看的海报?如何加上你的IP

下载
  • Express 默认不处理数据库连接,记得用 mysql2 或 pg 等驱动,别依赖已弃用的 mysql 包
  • res.render() 报 Cannot read property 'forEach' of undefined,大概率是没传 users 或传了 null
  • 模板里写 是调试手段,上线前删掉,避免 XSS 风险

前端用 fetch 从 API 拿数据,跨域和 Content-Type 得对上

后端 API 返回 JSON,但响应头没设 Content-Type: application/json,前端 response.json() 就会抛 Unexpected token 错误。不是数据错了,是浏览器根本没当成 JSON 解析。

另一个高频问题是本地开发时后端跑在 localhost:3000,前端在 file:// 打开 HTML,fetch 直接被浏览器拦截——这不是代码问题,是协议不一致导致的跨域限制。

  • 后端加响应头:res.setHeader('Access-Control-Allow-Origin', '*')(开发用,生产请限定域名)
  • fetch 后必须链式调用 .then(r => r.json()),不能省;如果后端返回的是纯 HTML 片段,就该用 r.text()
  • HTML 中写 fetch('/api/users').then(...),路径别写成绝对 URL(如 http://localhost:8000/api/users),否则部署到子路径时会 404

SQL 注入和 XSS 不是“以后再修”,得从第一行代码防起

拼接 SQL 字符串("SELECT * FROM users WHERE id = " + req.query.id)或者把数据库字段原样 innerHTML = row.name 插进页面,等于把服务器和用户浏览器同时交给攻击者。

参数化查询和 HTML 转义不是可选项。Node.js 用 mysql2 的 query('SELECT * FROM users WHERE id = ?', [id]);前端渲染前用 DOMPurify.sanitize() 或至少 textContent 替代 innerHTML。

  • 即使字段内容看起来“只是名字”,也可能含 <script></script> 或 javascript:alert(1)
  • 后端返回的 JSON 如果带 HTML 字符串(如 {"bio":"<b>Admin</b>"}),前端决定是否渲染为 HTML,而不是默认信任
  • 本地开发时关掉浏览器的 XSS Auditor(Chrome 已移除),别靠它兜底

事情说清了就结束。真正卡住人的,往往不是怎么连数据库,而是哪一步少转义、哪个 header 没配、哪次 fetch 忘了 catch 错误。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

相关专题

更多
数据分析工具有哪些
数据分析工具有哪些

数据分析工具有Excel、SQL、Python、R、Tableau、Power BI、SAS、SPSS和MATLAB等。详细介绍:1、Excel,具有强大的计算和数据处理功能;2、SQL,可以进行数据查询、过滤、排序、聚合等操作;3、Python,拥有丰富的数据分析库;4、R,拥有丰富的统计分析库和图形库;5、Tableau,提供了直观易用的用户界面等等。

4823

2023.10.12

SQL中distinct的用法
SQL中distinct的用法

SQL中distinct的语法是“SELECT DISTINCT column1, column2,...,FROM table_name;”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

991

2023.10.27

SQL中months_between使用方法
SQL中months_between使用方法

在SQL中,MONTHS_BETWEEN 是一个常见的函数,用于计算两个日期之间的月份差。想了解更多SQL的相关内容,可以阅读本专题下面的文章。

1269

2024.02.23

SQL出现5120错误解决方法
SQL出现5120错误解决方法

SQL Server错误5120是由于没有足够的权限来访问或操作指定的数据库或文件引起的。想了解更多sql错误的相关内容,可以阅读本专题下面的文章。

6841

2024.03.06

sql procedure语法错误解决方法
sql procedure语法错误解决方法

sql procedure语法错误解决办法:1、仔细检查错误消息;2、检查语法规则;3、检查括号和引号;4、检查变量和参数;5、检查关键字和函数;6、逐步调试;7、参考文档和示例。想了解更多语法错误的相关内容,可以阅读本专题下面的文章。

3543

2024.03.06

oracle数据库运行sql方法
oracle数据库运行sql方法

运行sql步骤包括:打开sql plus工具并连接到数据库。在提示符下输入sql语句。按enter键运行该语句。查看结果,错误消息或退出sql plus。想了解更多oracle数据库的相关内容,可以阅读本专题下面的文章。

6820

2024.04.07

sql中where的含义
sql中where的含义

sql中where子句用于从表中过滤数据,它基于指定条件选择特定的行。想了解更多where的相关内容,可以阅读本专题下面的文章。

9481

2024.04.29

sql中删除表的语句是什么
sql中删除表的语句是什么

sql中用于删除表的语句是drop table。语法为drop table table_name;该语句将永久删除指定表的表和数据。想了解更多sql的相关内容,可以阅读本专题下面的文章。

1290

2024.04.29

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

0

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 237人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn