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

html页面读取数据库

admin
行业动态
2025-04-30
4629

HTML页面无法直接读取数据库，需通过后端（如PHP/Python）连接数据库，利用AJAX/Fetch API异步获取数据，再渲染到页面，注意防范SQL注入等安全问题

数据库读取流程

通过HTML页面读取数据库需要后端程序作为桥梁,前端发送请求，后端连接数据库并返回数据，以下是通用实现步骤：

客户端（HTML）
- 使用AJAX/Fetch API发送异步请求
- 通过JavaScript处理返回数据并渲染页面
服务器端
- 接收HTTP请求
- 建立数据库连接
- 执行SQL查询/数据库操作
- 返回JSON格式数据
数据库
存储实际数据（如MySQL/MongoDB/PostgreSQL）

技术实现方案对比

技术栈	适用场景	核心优势
PHP + MySQL	快速开发中小型网站	原生支持，部署简单
Node.js + MongoDB	高并发I/O密集型应用	非阻塞异步处理
Python + SQLite	轻量级桌面应用/原型开发	零配置，单文件数据库
Java + PostgreSQL	企业级复杂业务系统	强类型，事务安全性

PHP+MySQL 实现示例

数据库配置（config.php）

<?php
$host = 'localhost';
$dbname = 'test_db';
$user = 'root';
$password = '123456';
try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $user, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die('数据库连接失败: ' . $e->getMessage());
}
?>

数据查询接口（api.php）

<?php
require 'config.php';
$sql = "SELECT  FROM users";
$stmt = $pdo->query($sql);
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);
header('Content-Type: application/json');
echo json_encode($data);
?>

HTML页面请求数据（index.html）

<!DOCTYPE html>
<html>
<head>数据库读取示例</title>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            fetch('api.php')
                .then(response => response.json())
                .then(data => {
                    const table = document.getElementById('data-table');
                    data.forEach(row => {
                        const tr = table.insertRow();
                        Object.values(row).forEach(text => {
                            const td = document.createElement('td');
                            td.textContent = text;
                            tr.appendChild(td);
                        });
                    });
                });
        });
    </script>
</head>
<body>
    <table id="data-table" border="1">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
    </table>
</body>
</html>

安全与性能优化

风险点	解决方案
SQL注入攻击	使用预处理语句（Prepared Statements）
跨域数据泄露	设置CORS头（Access-Control-Allow-Origin）
大数据量传输	分页查询（LIMIT/OFFSET）或游标查询
敏感数据暴露	后端过滤字段，前端脱敏处理（如手机号中间四位变星号）