如何在NodeJS前端JS函数中发送POST请求至Express后端?
解决方案
没问题,我帮你把前后端的实现都理清楚,直接就能用:
前端(Example.js)修改
首先你原来的senddata()函数有个小问题——return true;写在函数外面了,我帮你修正,同时加入POST请求的逻辑。这里给你两种常用方案:
方案1:用原生Fetch API(无额外依赖)
var a; var b; function senddata() { a = "Hassan"; b = 7; // 发送POST请求到后端路由 fetch('/save', { method: 'POST', headers: { 'Content-Type': 'application/json', // 告诉后端我们发的是JSON格式 }, body: JSON.stringify({ a, b }) // 把变量打包成JSON字符串 }) .then(response => { if (!response.ok) { throw new Error('请求失败'); } return response.json(); }) .then(data => { console.log('数据保存成功:', data); return true; // 把return放在函数内部 }) .catch(error => { console.error('请求出错:', error); return false; // 出错时返回false }); }
方案2:用Axios(更简洁,需先安装)
如果你习惯用Axios,先通过npm安装:
npm install axios
然后修改senddata():
var a; var b; const axios = require('axios'); // 或者用import axios from 'axios'如果是ES模块 function senddata() { a = "Hassan"; b = 7; axios.post('/save', { a, b }) .then(response => { console.log('数据保存成功:', response.data); return true; }) .catch(error => { console.error('请求出错:', error); return false; }); }
后端(Routes.js + 主App文件)完善
第一步:确保Express能解析JSON请求体
在你的Express主文件(比如app.js/server.js)里,必须加上这一行,否则req.body会是undefined:
const express = require('express'); const app = express(); // 解析JSON格式的请求体(Express 4.16+内置,不需要额外装body-parser) app.use(express.json()); // 引入你的路由 const routes = require('./Routes'); app.use('/', routes);
第二步:完善/save路由的逻辑
现在可以在Routes.js里获取前端传过来的a和b,然后存入数据库。这里给你一个通用的示例(假设你用MongoDB+Mongoose,其他数据库逻辑类似):
const router = require('express').Router(); // 假设你已经定义了数据库模型,比如User const User = require('../models/User'); router.post('/save', async function (req, res, next) { try { // 从请求体里拿到a和b的值 const { a, b } = req.body; // 存入数据库(这里用Mongoose的示例,根据你的数据库调整) const newData = new User({ name: a, // 假设你的模型里有name字段对应a age: b // age字段对应b }); await newData.save(); // 给前端返回成功响应 res.status(200).json({ message: '数据保存成功', data: newData }); } catch (err) { // 处理错误,传给Express的错误处理中间件 next(err); } }); module.exports = router;
注意事项
- 确保前后端的请求路径一致:前端发的是
/save,后端路由也是/save,如果前端是跨域请求(比如前端在3000端口,后端在5000),还要在后端配置CORS(可以用cors包)。 - 数据库操作记得用异步/await或者Promise,避免阻塞事件循环。
内容的提问来源于stack exchange,提问作者sidius92
相关产品推荐
相关产品推荐

