HTML如何访问数据库？

当前位置：首页 > 前端开发 > HTML如何访问数据库？

详情介绍

HTML本身不能直接访问数据库，通常需要结合服务器端语言（如PHP、Python）或JavaScript运行时环境（如Node.js）执行数据库操作，再通过API接口将数据返回到HTML页面展示，前端可通过AJAX技术异步获取数据。

在Web开发中，HTML本身无法直接访问数据库，因为HTML是一种标记语言，仅用于定义网页结构和内容，但通过与服务器端技术或API结合，可以实现数据库的访问和操作,以下是三种主流方法及示例：

通过服务器端语言（推荐）

原理：
HTML表单或请求 → 服务器端语言（如PHP/Python）处理 → 连接数据库 → 返回结果到HTML页面。

示例（PHP + MySQL）：

HTML如何访问数据库？第1张

<!-- HTML表单（index.html） -->
<form action="get_data.php" method="POST">
  <input type="text" name="user_id">
  <button type="submit">查询</button>
</form>
<!-- PHP处理（get_data.php） -->
<?php
// 连接MySQL
$conn = new mysqli("localhost", "username", "password", "mydb");
// 获取用户输入
$user_id = $_POST['user_id'];
// 安全查询（预处理防SQL注入）
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();
// 显示结果
while ($row = $result->fetch_assoc()) {
  echo "用户名：" . $row['name'];
}
$conn->close();
?>

通过JavaScript + API（现代主流）

原理：
HTML页面 → JavaScript发起API请求（Fetch/Axios）→ 后端API处理数据库 → 返回JSON数据 → 前端动态渲染。

示例（JavaScript + Node.js API）：

<!-- HTML部分 -->
<button onclick="loadData()">加载用户</button>
<div id="result"></div>
<script>
async function loadData() {
  // 调用后端API
  const response = await fetch('https://api.example.com/users');
  const data = await response.json();
  // 渲染数据
  document.getElementById("result").innerHTML = 
    `用户名：${data.name}，邮箱：${data.email}`;
}
</script>

后端Node.js（简化示例）：

HTML如何访问数据库？第2张

const express = require('express');
const app = express();
app.get('/users', (req, res) => {
  // 数据库查询（此处伪代码）
  db.query("SELECT * FROM users", (err, result) => {
    res.json(result[0]); // 返回JSON
  });
});
app.listen(3000);