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

如何在网页中通过div元素动态显示数据库内容？

admin
行业动态
2025-01-25
3033

数据库是用于存储、管理和检索数据的系统，它以电子化的方式高效地组织和保存大量数据。

在网页开发中，使用<div> 标签来显示数据库内容是一种常见的做法，通过结合前端技术和后端技术，可以实现从数据库中获取数据并在网页上展示的功能，以下是一个详细的示例，包括HTML、CSS和JavaScript代码，以及如何使用PHP与MySQL数据库进行交互。

如何在网页中通过div元素动态显示数据库内容？第1张

HTML部分

我们创建一个基本的HTML结构，其中包含一个用于显示数据的<div> 元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示数据库内容</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>数据库内容展示</h1>
    <div id="data-container"></div>
    <script src="script.js"></script>
</body>
</html>

CSS部分

我们添加一些简单的CSS样式，使页面更加美观。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
#data-container {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 20px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
    text-align: left;
}
th {
    background-color: #f2f2f2;
}

JavaScript部分

我们使用JavaScript（或jQuery）来动态地将数据显示在<div> 中，假设我们有一个后端API可以返回JSON格式的数据。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    fetch('api/getData.php')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('data-container');
            let html = '<table><tr><th>ID</th><th>Name</th><th>Age</th></tr>';
            data.forEach(item => {
                html +=<tr><td>${item.id}</td><td>${item.name}</td><td>${item.age}</td></tr>;
            });
            html += '</table>';
            container.innerHTML = html;
        })
        .catch(error => console.error('Error fetching data:', error));
});

PHP部分

我们编写一个简单的PHP脚本来从MySQL数据库中获取数据，并将其以JSON格式返回。

<?php
// api/getData.php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testdb";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, name, age FROM users";
$result = $conn->query($sql);
$data = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
$conn->close();
header('Content-Type: application/json');
echo json_encode($data);
?>