HTML页面接收数据库数据的过程通常涉及到后端服务器和前端页面的交互，在这个过程中，后端服务器负责从数据库中获取数据，然后将这些数据发送到前端页面，前端页面则负责接收这些数据，并将其展示给用户，这个过程可以通过多种技术实现，包括PHP、ASP.NET、Node.js等后端技术，以及AJAX、Fetch API等前端技术。
1、后端服务器与数据库交互
我们需要在后端服务器上编写代码来连接数据库并获取数据，这里以PHP为例，我们可以使用PDO（PHP Data Objects）扩展来连接MySQL数据库，以下是一个简单的示例：
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// 设置PDO错误模式为异常
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo "Connection failed: " + $e->getMessage();
exit;
}
// 查询数据库
$sql = "SELECT * FROM myTable";
$result = $conn->query($sql);
?>
2、将数据发送到前端页面
接下来，我们需要将查询到的数据发送到前端页面，这里我们使用JSON格式来传输数据，以下是一个简单的示例：
<?php
// 将查询结果转换为JSON格式
$data = array();
while($row = $result->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
echo json_encode($data);
?>
3、前端页面接收数据并展示
我们需要在前端页面上编写代码来接收后端服务器发送的数据，并将其展示给用户，这里我们使用JavaScript的Fetch API来实现这个功能，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML页面接收数据库数据</title>
</head>
<body>
<div id="data"></div>
<script>
// 使用Fetch API从后端服务器获取数据
fetch('getData.php')
.then(response => response.json())
.then(data => {
// 将数据显示在页面上
const dataDiv = document.getElementById('data');
data.forEach(item => {
const p = document.createElement('p');
p.textContent = ID: ${item.id}, Name: ${item.name};
dataDiv.appendChild(p);
});
})
.catch(error => console.error('Error:', error));
</script>
</body>
</html>
在这个示例中，我们首先使用Fetch API从名为getData.php的后端服务器获取数据，我们将获取到的数据解析为JSON格式，并将其存储在data变量中，接着，我们遍历data数组，并为每个元素创建一个<p>标签，将其显示在名为data的<div>元素中，如果在获取或处理数据的过程中发生错误，我们将在控制台中打印出错误信息。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/361060.html
微信扫一扫 