html如何展示后台数据

HTML 是一种标记语言，用于创建网页的结构，要展示后台数据，我们需要结合 JavaScript、CSS 和后端技术（如 PHP、Node.js 等）来实现，以下是一个简单的示例，展示了如何使用 HTML、JavaScript 和 PHP 从后台获取数据并展示在网页上。

（图片来源网络，侵删）

1、创建一个 HTML 文件，index.html，并添加以下内容：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>后台数据展示</title>
    <style>
        table {
            width: 100%;
            bordercollapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            textalign: left;
        }
        th {
            backgroundcolor: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>后台数据展示</h1>
    <table id="datatable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="main.js"></script>
</body>
</html>

2、创建一个 JavaScript 文件，main.js，并添加以下内容：

document.addEventListener('DOMContentLoaded', function() {
    fetchData();
});
function fetchData() {
    fetch('get_data.php')
        .then(response => response.json())
        .then(data => {
            const tableBody = document.querySelector('#datatable tbody');
            data.forEach(item => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                `;
                tableBody.appendChild(row);
            });
        })
        .catch(error => console.error('Error:', error));
}

3、创建一个 PHP 文件，get_data.php，并添加以下内容：

<?php
header('ContentType: application/json');
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$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);
$data = [];
if ($result>num_rows > 0) {
    while($row = $result>fetch_assoc()) {
        $data[] = $row;
    }
} else {
    echo "0 结果";
}
$conn>close();
echo json_encode($data);
?>

在这个示例中，我们首先创建了一个 HTML 文件，用于展示后台数据，我们使用 JavaScript 的 fetch 函数从 get_data.php 文件中获取数据。get_data.php 文件通过 PHP 连接到数据库，查询用户数据，并将结果以 JSON 格式返回给前端，我们在 JavaScript 中解析 JSON 数据，并将其插入到 HTML 表格中。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/428329.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。