前端HTML本身并不能直接接收数据库的数据，因为HTML只是一种标记语言，用于描述网页的结构，我们可以通过一些后端技术（如PHP，Node.js等）从数据库获取数据，然后将这些数据嵌入到HTML中，以下是一个简单的流程：
（图片来源网络，侵删）
1、后端服务器与数据库交互
2、后端服务器处理数据
3、后端服务器发送数据到前端
4、前端HTML接收并显示数据
这个过程可以使用各种语言和技术来实现，例如使用Node.js和Express框架，或者使用PHP和MySQL数据库。
以Node.js和Express为例，我们可以创建一个API接口，该接口从数据库获取数据，然后将数据作为JSON返回，我们可以在前端使用AJAX或Fetch API来请求这个接口，获取数据，然后将数据插入到HTML中。
以下是一个简单的例子：
后端（Node.js + Express）：
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
// 这里假设我们已经从数据库获取了数据
const data = [{name: '张三', age: 20}, {name: '李四', age: 30}];
res.json(data);
});
app.listen(port, () => console.log(Server is running on http://localhost:${port}));
前端（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<body>
<h2>从服务器获取的数据</h2>
<div id="data"></div>
<script>
fetch('http://localhost:3000/api/data')
.then(response => response.json())
.then(data => {
const div = document.getElementById('data');
data.forEach(item => {
div.innerHTML += <p>姓名：${item.name}，年龄：${item.age}</p>;
});
});
</script>
</body>
</html>
在这个例子中，我们首先在后端创建了一个API接口，该接口返回一个包含两个对象的数组，在前端，我们使用Fetch API来请求这个接口，获取数据，然后将数据插入到HTML中。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/391194.html
微信扫一扫