HTML是一种用于创建网页的标记语言，它本身并不能直接获取后端数据库的数据，通过JavaScript和一些后端技术，我们可以实现HTML页面与后端数据库的交互，在本回答中，我们将详细介绍如何使用HTML、JavaScript和PHP来实现这一目标。
1、准备工作
我们需要一个运行PHP的服务器环境，这里我们以XAMPP为例，它是一个包含Apache服务器、MySQL数据库和PHP解释器的集成环境，你可以从官方网站下载并安装：https://www.apachefriends.org/index.html
2、创建数据库和表
在安装好XAMPP后，我们需要创建一个数据库来存储数据，这里我们创建一个名为testdb的数据库，并在其中创建一个名为users的表，用于存储用户信息。
CREATE DATABASE testdb;
USE testdb;
CREATE TABLE users (
id INT(11) NOT NULL AUTO_INCREMENT,
name VARCHAR(50) NOT NULL,
age INT(3),
PRIMARY KEY (id)
);
3、插入数据
接下来，我们向users表中插入一些数据：
INSERT INTO users (name, age) VALUES ('张三', 25);
INSERT INTO users (name, age) VALUES ('李四', 30);
INSERT INTO users (name, age) VALUES ('王五', 35);
4、创建HTML页面
现在我们创建一个HTML页面，用于显示用户信息，在这个页面中，我们将使用JavaScript来发送AJAX请求，从后端获取数据，并将其显示在页面上。
创建一个名为index.html的文件，内容如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF8">
<title>获取后端数据库数据</title>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<h1>用户信息</h1>
<table id="userTable" border="1">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</table>
<script>
function loadData() {
$.ajax({
url: 'get_data.php', // 请求后端数据的URL
type: 'GET', // 请求类型为GET
dataType: 'json', // 预期服务器返回JSON格式的数据
success: function(data) { // 请求成功后的回调函数
var table = $('#userTable'); // 获取表格元素
for (var i = 0; i < data.length; i++) { // 遍历返回的数据
var row = $('<tr></tr>'); // 创建表格行元素
row.append('<td>' + data[i].id + '</td>'); // 添加ID列
row.append('<td>' + data[i].name + '</td>'); // 添加姓名列
row.append('<td>' + data[i].age + '</td>'); // 添加年龄列
table.append(row); // 将行元素添加到表格中
}
}
});
}
loadData(); // 页面加载时调用loadData函数，获取数据并显示在表格中
</script>
</body>
</html>
5、创建PHP处理文件
接下来，我们创建一个名为get_data.php的文件，用于处理前端发起的请求，从数据库中获取数据，并将其以JSON格式返回给前端。
<?php
header('ContentType: application/json'); // 设置响应头，告诉浏览器返回的是JSON格式的数据
$servername = "localhost"; // 数据库服务器地址
$username = "root"; // 数据库用户名（请根据实际情况修改）
$password = ""; // 数据库密码（请根据实际情况修改）
$dbname = "testdb"; // 数据库名称（请根据实际情况修改）
$conn = new mysqli($servername, $username, $password, $dbname); // 建立与数据库的连接
if ($conn>connect_error) { // 如果连接失败，输出错误信息并结束脚本执行
die("连接失败： " . $conn>connect_error);
} else { // 如果连接成功，执行查询操作，并将结果以JSON格式返回给前端
$sql = "SELECT * FROM users"; // SQL查询语句，从users表中获取所有数据
$result = $conn>query($sql); // 执行查询操作，并将结果保存在$result变量中
$data = array(); // 用于存储查询结果的数组
if ($result>num_rows > 0) { // 如果查询结果中有数据，将其逐行读取并添加到$data数组中
while($row = $result>fetch_assoc()) { // fetch_assoc()方法用于获取查询结果中的每一行数据，并将其作为关联数组返回（键名是字段名）
$data[] = $row; // 将每一行数据添加到$data数组中
}
} else { // 如果查询结果中没有数据，输出提示信息并结束脚本执行
echo "没有找到数据";
exit;
}
echo json_encode($data); // 将$data数组转换为JSON格式的字符串，并输出给前端（通过HTTP响应）
$conn>close(); // 关闭与数据库的连接（不再需要时一定要关闭连接）
}
?>
至此，我们已经完成了整个流程，现在，你可以运行XAMPP服务器，然后在浏览器中访问index.html文件，你将看到一个包含用户信息的表格，这些数据是从后端数据库中获取的。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/374201.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复