HTML如何连接MySQL显示数据

HTML本身无法直接读取MySQL数据库，因为它只是静态标记语言，缺乏连接数据库所需的驱动、认证机制和执行环境；真正可行的方案必须依赖PHP等后端脚本作为中转——HTML通过fetch或表单发起请求，由服务端连接MySQL、查询数据并返回JSON，前端再渲染结果；实践中常见陷阱包括MySQL权限配置错误（如localhost与127.0.0.1不等价）、PHP mysqli扩展未启用、密码认证协议不兼容（尤其MySQL 8.0+）、Web服务器未正确解析PHP，以及硬编码数据库凭证带来的安全风险——理解这一前后端协作本质，才能避开“纯HTML连MySQL”的认知误区，高效构建安全可靠的数据展示应用。

浏览器不能直接读取 MySQL 数据库，所有“HTML 读取 MySQL”的说法本质上是误解——HTML 是纯静态标记语言，没有数据库连接能力。

为什么 HTML 自己连不了 MySQL

HTML 运行在浏览器里，而 MySQL 服务端默认只响应本地或授权 IP 的 TCP 连接（端口 3306），且要求认证、SQL 执行环境。浏览器既没驱动，也没权限，更不暴露原始 socket 接口。

常见错误现象：
– 页面空白或报 Access to XMLHttpRequest at 'http://localhost:8080/query.php' from origin 'null' has been blocked
– 直接把 mysql_connect() 写进 .html 文件，打开后完全没反应
– 用 fetch('/data.php') 却返回 PHP 报错页面或 500 错误，误以为是前端问题

真正可行的链路：HTML + 后端脚本（如 PHP/Node.js）

必须由服务端语言中转：HTML 发请求 → 后端脚本连 MySQL → 返回 JSON/HTML 片段 → 前端渲染。

• 最轻量常用组合是 PHP：把查询逻辑写在 .php 文件里，HTML 用 fetch 或表单提交调用它
• 注意 mysqli_connect() 的第三个参数是用户名，第四个是密码，顺序错会导致 Connection refused 或空结果
• PHP 默认不开启 mysqli 扩展，Windows 下要检查 php.ini 是否取消了 ;extension=mysqli 的注释
• 别把数据库密码硬编码在 .php 里传给前端——哪怕只是调试，也容易被爬虫或误操作泄露

简单示例（data.php）：

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db   = 'test';
$conn = mysqli_connect($host, $user, $pass, $db);
if (!$conn) die('连接失败: ' . mysqli_connect_error());
$result = mysqli_query($conn, "SELECT id, name FROM users");
$data = [];
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
header('Content-Type: application/json');
echo json_encode($data);
?>

对应 index.html 中调用：

<script>
fetch('data.php')
  .then(r => r.json())
  .then(data => {
    const list = data.map(d => `

安全与部署上最容易被忽略的点

本地开发时用 localhost 看似能通，一上线就 500 或空响应，往往卡在这几个地方：

• MySQL 用户权限只给了 localhost，但 PHP 是通过 127.0.0.1 连的（二者在 MySQL 权限系统里不等价），得显式创建 'user'@'127.0.0.1'
• Linux 服务器 SELinux 或防火墙（如 ufw）可能拦截了 PHP 到 3306 的 outbound 连接
• mysqli 默认使用旧式密码认证，MySQL 8.0+ 默认用 caching_sha2_password，PHP 7.4 以下不支持，会静默失败
• Apache/Nginx 没配置好 .php 解析，导致浏览器直接下载或显示源码

绕不开服务端，就别强求“纯 HTML 方案”；真想零后端，只能换数据源——比如用 SQLite 配合 sql.js 在前端跑，但那和 MySQL 完全是两回事。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~