当前位置：首页 > 前端开发 > 正文

HTML如何访问数据库？

admin
前端开发
2025-06-28
6

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

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

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

原理：

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

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

示例（PHP + MySQL）：

<form action="get_data.php" method="POST"> <input type="text" name="user_id"> <button type="submit">查询</button> </form>  <?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如何访问数据库？第2张

<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（简化示例）：

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);