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

html显示数据库的数据

admin
行业动态
2025-04-30
1

通过后端脚本连接数据库并查询数据，将结果传递至前端，使用HTML渲染动态展示

环境准备

技术栈	说明
后端语言	PHP/Python/Node.js（示例使用PHP）
数据库	MySQL/PostgreSQL（示例使用MySQL）
前端技术	HTML + JavaScript（可选AJAX）

后端数据获取

数据库连接与查询

// 连接数据库（PHP示例）
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 查询数据
$sql = "SELECT id, name, age FROM users";
$result = $conn->query($sql);
// 关闭连接
$conn->close();

数据传递到前端

// 将数据转换为关联数组
$data = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
// 输出JSON格式（供AJAX使用）
echo json_encode($data);

前端数据展示

静态HTML表格渲染

<table border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <!-假设已通过PHP循环输出以下内容 -->
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

动态渲染（AJAX示例）

<script>
fetch('api.php') // 后端接口地址
    .then(response => response.json())
    .then(data => {
        let table = '<table border="1"><tr><th>ID</th><th>姓名</th><th>年龄</th></tr>';
        data.forEach(row => {
            table += `<tr><td>${row.id}</td><td>${row.name}</td><td>${row.age}</td></tr>`;
        });
        table += '</table>';
        document.getElementById('container').innerHTML = table;
    });
</script>
<div id="container"></div>

完整示例流程

步骤	操作
后端查询数据库	`SELECT FROM users`
后端返回数据	JSON格式或直接嵌入HTML
前端接收数据	通过`fetch`或直接渲染
生成HTML表格	使用`<table>`标签动态拼接