You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.14 08:50:17