当前位置：首页 > 行业动态 > 正文

HTML如何直接连接数据库获取动态数据？

admin
行业动态
2025-05-05
2

HTML无法直接访问数据库，需结合服务器端语言（如PHP、Python、Node.js）或JavaScript运行时环境，通常通过表单/AJAX发送请求到后端，由服务器连接数据库处理查询，将结果返回到HTML页面动态渲染，常用技术栈包括MySQL+PHP或MongoDB+Node.js等组合实现数据交互。

在网站开发中,HTML作为前端标记语言，本身无法直接访问数据库，但通过与服务器端技术结合，可以实现数据库数据的动态展示，以下为三种主流实现方案及详细操作指南：

基础技术原理

前端（HTML/CSS/JavaScript）：负责数据呈现与用户交互
后端语言（PHP/Python/Node.js等）：处理业务逻辑
数据库（MySQL/MongoDB等）：数据存储与管理
通信协议：HTTP/HTTPS传输数据

PHP+MySQL实现方案

HTML如何直接连接数据库获取动态数据？第1张

<?php
// 数据库连接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mydb";
$conn = new mysqli($servername, $username, $password, $dbname);
// 安全查询示例
$stmt = $conn->prepare("SELECT id, name FROM users WHERE age > ?");
$minAge = 18;
$stmt->bind_param("i", $minAge);
$stmt->execute();
$result = $stmt->get_result();
?>
<!DOCTYPE html>
<html>
<body>
  <h2>用户列表</h2>
  <ul>
  <?php while($row = $result->fetch_assoc()): ?>
    <li><?php echo htmlspecialchars($row['name']); ?></li>
  <?php endwhile; ?>
  </ul>
</body>
</html>

Python（Django框架）方案

# views.py
from django.http import HttpResponse
from django.template import loader
from .models import User
def user_list(request):
    users = User.objects.filter(age__gt=18)
    template = loader.get_template('users.html')
    context = {'users': users}
    return HttpResponse(template.render(context, request))

<!-- users.html -->
<h2>用户列表</h2>
<ul>
{% for user in users %}
  <li>{{ user.name|escape }}</li>
{% endfor %}
</ul>

Node.js（Express + MongoDB）方案

// server.js
const express = require('express');
const mongoose = require('mongoose');
const app = express();
mongoose.connect('mongodb://localhost:27017/mydb');
app.get('/users', async (req, res) => {
  try {
    const users = await User.find({ age: { $gt: 18 } });
    res.send(`
      <h2>用户列表</h2>
      <ul>
        ${users.map(user => `<li>${user.name}</li>`).join('')}
      </ul>
    `);
  } catch (error) {
    res.status(500).send('服务器错误');
  }
});

安全实践要点