如何优雅地将 MySQL 数据在 HTML 页面中展示-php教程-PHP中文网

如何优雅地将 MySQL 数据在 HTML 页面中展示

心靈之曲

发布： 2025-10-14 09:18:28

原创

897人浏览过

如何优雅地将 mysql 数据在 html 页面中展示

本文旨在提供一个清晰、简洁的教程，指导开发者如何使用 PHP 从 MySQL 数据库中检索数据，并将其以美观的 HTML 表格形式呈现于网页上。我们将探讨如何建立数据库连接、执行查询、处理结果集，以及最终将数据格式化并插入到 HTML 表格中，同时注重代码的可读性和资源效率。

连接数据库

首先，我们需要建立与 MySQL 数据库的连接。以下代码展示了如何使用 PDO (PHP Data Objects) 扩展来连接数据库，并设置错误处理模式：

<?php
// 数据库连接参数
define('DB_ADR', 'localhost'); // 数据库地址
define('DB_DBN', 'i8127115_wp4'); // 数据库名称
define('DB_USR', ''); // 数据库用户名
define('DB_PWD', ''); // 数据库密码

try {
    // 创建 PDO 实例
    $pdo = new PDO('mysql:host='.DB_ADR.';dbname='.DB_DBN.';charset=UTF8', DB_USR, DB_PWD);
    // 设置错误处理模式为异常
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    echo "数据库连接成功！"; // 可选：成功连接提示

} catch(PDOException $e) {
    echo "连接失败: " . $e->getMessage();
}
?>

登录后复制

注意事项：

请根据你的实际情况修改数据库地址、数据库名称、用户名和密码。
建议将数据库连接信息存储在配置文件中，而不是硬编码在代码中，以提高安全性和可维护性。
charset=UTF8 确保数据以 UTF-8 编码传输，避免乱码问题。

执行查询并获取数据

连接成功后，我们可以执行 SQL 查询来获取需要展示的数据。以下代码展示了如何执行查询并循环遍历结果集：

立即学习“前端免费学习笔记（深入）”；

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

<?php
// ... (数据库连接代码，如上所示) ...

// 定义 HTML 表格行模板
define('TMPL', '<tr><td style="width: 150px; border: 1px solid black;">%s</td></tr>');

try {
    // 执行 SQL 查询
    $stmt = $pdo->query("SELECT info FROM wp_amelia_customer_bookings;");

    // 开始 HTML 表格
    echo "<table style='border: solid 1px black;'>";
    echo "<tr><th>Info</th></tr>"; // 表头

    // 循环遍历结果集
    foreach($stmt as $row) {
        // 使用 sprintf 函数将数据格式化为 HTML 表格行
        printf(TMPL, htmlspecialchars($row['info'])); // 使用 htmlspecialchars 进行转义
    }

    // 结束 HTML 表格
    echo "</table>";

} catch(PDOException $e) {
    echo "查询失败: " . $e->getMessage();
}
?>

登录后复制

代码解释：

$pdo-youjiankuohaophpcnquery("SELECT info FROM wp_amelia_customer_bookings;") 执行 SQL 查询，返回一个 PDOStatement 对象。
foreach($stmt as $row) 循环遍历结果集，每次迭代 $row 包含一行数据，以关联数组的形式存储。
$row['info'] 访问 info 列的值。
sprintf(TMPL, $row['info']) 使用 sprintf 函数将数据格式化为 HTML 表格行。 %s 是占位符，会被 $row['info'] 的值替换。
htmlspecialchars($row['info']) 对数据进行 HTML 实体编码，防止 XSS 攻击。确保将用户提供的数据进行转义，再显示到页面上。
echo "<table ...> 和 echo "</table>" 分别输出 HTML 表格的开始和结束标签。

完整示例代码

将以上代码片段整合，得到一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>MySQL 数据展示</title>
</head>
<body>

<?php
// 数据库连接参数
define('DB_ADR', 'localhost');
define('DB_DBN', 'i8127115_wp4');
define('DB_USR', '');
define('DB_PWD', '');

// 定义 HTML 表格行模板
define('TMPL', '<tr><td style="width: 150px; border: 1px solid black;">%s</td></tr>');

try {
    // 创建 PDO 实例
    $pdo = new PDO('mysql:host='.DB_ADR.';dbname='.DB_DBN.';charset=UTF8', DB_USR, DB_PWD);
    // 设置错误处理模式为异常
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 执行 SQL 查询
    $stmt = $pdo->query("SELECT info FROM wp_amelia_customer_bookings;");

    // 开始 HTML 表格
    echo "<table style='border: solid 1px black;'>";
    echo "<tr><th>Info</th></tr>"; // 表头

    // 循环遍历结果集
    foreach($stmt as $row) {
        // 使用 sprintf 函数将数据格式化为 HTML 表格行
        printf(TMPL, htmlspecialchars($row['info'])); // 使用 htmlspecialchars 进行转义
    }

    // 结束 HTML 表格
    echo "</table>";

} catch(PDOException $e) {
    echo "连接/查询失败: " . $e->getMessage();
} finally {
    // 关闭数据库连接
    $pdo = null;
}
?>

</body>
</html>

登录后复制

总结：

通过使用 PDO 扩展，我们可以方便地连接 MySQL 数据库，执行 SQL 查询，并将查询结果以 HTML 表格的形式展示在网页上。在实际应用中，请务必注意安全性，对用户输入进行验证和转义，防止 SQL 注入和 XSS 攻击。此外，合理地组织代码，使用配置文件管理数据库连接信息，可以提高代码的可读性和可维护性。最后，使用 finally 块来确保数据库连接被关闭，释放资源。

以上就是如何优雅地将 MySQL 数据在 HTML 页面中展示的详细内容，更多请关注php中文网其它相关文章！