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

html动态调用数据库中的数据

通过服务器端脚本（如PHP）连接数据库，执行SQL查询获取数据，利用AJAX/Fetch将结果渲染为HTML元素实现

前端（HTML）→ 后端（服务器）→ 数据库 → 返回数据 → 渲染前端，主要涉及技术包括：

  • 后端语言：PHP、Python、Node.js 等
  • 数据库：MySQL、PostgreSQL、MongoDB 等
  • 数据传输：JSON、XML 或直接嵌入 HTML

后端连接数据库（以 PHP + MySQL 为例）

  1. 配置数据库连接

    html动态调用数据库中的数据 第1张

    <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
?>

  2. 查询数据并输出

    <?php
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // 输出数据为 HTML 表格
    echo "<table><tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>";
    while($row = $result->fetch_assoc()) {
        echo "<tr>";
        echo "<td>".$row["id"]."</td>";
        echo "<td>".$row["name"]."</td>";
        echo "<td>".$row["email"]."</td>";
        echo "</tr>";
    }
    echo "</table>";
} else {
    echo "无数据";
}
$conn->close();
?>

前端通过 AJAX 动态获取数据（以 JavaScript + PHP 为例）

  1. 前端发送请求

    <script>
fetch('get_data.php') // PHP 脚本路径
    .then(response => response.json())
    .then(data => {
        let table = "<table><tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>";
        data.forEach(row => {
            table += `<tr><td>${row.id}</td><td>${row.name}</td><td>${row.email}</td></tr>`;
        });
        table += "</table>";
        document.getElementById("data-container").innerHTML = table;
    });
</script>

  2. 后端返回 JSON 数据（get_data.php） 

    <?php
header('Content-Type: application/json');
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
$data = [];
while($row = $result->fetch_assoc()) {
    $data[] = $row;
}
echo json_encode($data);
?>

动态渲染数据示例（单元表格形式）

技术栈 关键步骤 代码示例
PHP + HTML 直接在 HTML 中嵌入 PHP 代码 echo "<td>".$row["name"]."</td>";
JavaScript + AJAX 前端异步请求，后端返回 JSON fetch('api.php').then(...)
框架（如 Laravel） 使用 ORM 或查询构造器 $users = DB::table('users')->get();

常见问题与解答

问题 1：如何防止 SQL 注入？

解答：

  • 使用 预处理语句（Prepared Statements）： 
    $stmt = $conn->prepare("SELECT  FROM users WHERE id = ?");
$stmt->bind_param("s", $user_id);
$stmt->execute();
  • 或使用 PDO（PHP）： 
    $stmt = $pdo->prepare("SELECT  FROM users WHERE email = :email");
$stmt->execute(['email' => $email]);

问题 2：数据量过大时如何优化性能？

解答：

  1. 分页查询：仅加载当前页数据，减少单次传输量。 
    SELECT  FROM users LIMIT 10 OFFSET 0; -第1页，每页10条
  2. 懒加载：滚动到底部时通过 AJAX 加载更多数据。
  3. 缓存：将常用数据缓存到内存（如 Redis）或静态
0

相关文章