js获取数据库的数据并出现在html上
时间: 2024-03-24 20:40:16 浏览: 13
在前端获取数据库的数据,需要通过后端接口来实现。以下是一种常见的实现方式:
1. 后端接口
首先,在后端实现一个接口,用来获取数据库中的数据,然后将数据以 JSON 格式返回给前端。这里以 Node.js 和 Express 框架为例:
```javascript
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
// 获取数据库中的数据
const data = [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '李四', age: 20 },
{ id: 3, name: '王五', age: 22 },
];
// 将数据以 JSON 格式返回给前端
res.json(data);
});
app.listen(3000, () => {
console.log('Server is running at http://localhost:3000');
});
```
2. 前端接口调用
在前端使用 Ajax 或 Fetch 等方式调用后端接口,获取数据,然后将数据渲染到 HTML 页面上。以下是一个使用 Axios 库调用后端接口的示例代码:
```html
<!-- HTML 页面 -->
<ul id="data"></ul>
<!-- 引入 Axios 库 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- JS 代码 -->
<script>
// 请求后端接口
axios.get('/api/data').then(response => {
// 将数据渲染到 HTML 页面上
const data = response.data;
const list = document.getElementById('data');
data.forEach(item => {
const li = document.createElement('li');
li.textContent = `${item.id}、${item.name},年龄:${item.age}岁`;
list.appendChild(li);
});
});
</script>
```
以上示例代码仅供参考,具体实现方式需要根据实际情况进行调整。