要实现前后端的交互，通常使用客户端和服务器之间的通信协议，例如 HTTP。以下是一个简单的示例，展示了如何使用前端（JavaScript）和后端（Node.js）进行交互：
前端代码（HTML + JavaScript）：
<!DOCTYPE html>
<html>
<head>
<title>前后端交互示例</title>
</head>
<body>
<h1>前后端交互示例</h1>
<button onclick="getData()">获取数据</button>
<div id="result"></div>
<script>
// 发送 GET 请求到后端获取数据
function getData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
// 将获取的数据显示在页面上
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = JSON.stringify(data);
})
.catch(error => {
console.error('请求出错:', error);
});
}
</script>
</body>
</html>
后端代码（Node.js）：
const express = require('express');
const app = express();
const port = 3000;
// 定义一个 API 端点，用于处理前端发送的请求
app.get('/api/data', (req, res) => {
// 模拟后端返回的数据
const data = {
message: '这是后端返回的数据'
};
// 将数据以 JSON 格式发送给前端
res.json(data);
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
要运行这个示例，你需要在本地安装 Node.js，并通过以下步骤执行：
- 创建一个文件夹，并将上述前端和后端代码分别保存为
index.html和server.js。 - 打开终端，导航到该文件夹。
- 运行
npm init -y命令初始化项目（如果尚未初始化）。 - 运行
npm install express命令安装 Express 框架。 - 运行
node server.js命令启动后端服务器。 - 在浏览器中打开
index.html文件，点击 "获取数据" 按钮，你将看到后端返回的数据显示在页面上。
这就是一个简单的前后端交互示例，前端通过发起 HTTP 请求获取后端返回的数据。你可以根据实际需求进行扩展和修改。
标签：const,示例,data,前端,前后,js,如何,交互 From： https://www.cnblogs.com/959886jjc/p/17516419.html