如何将网页端JavaScript的变量传递到Node.js并写入JSON文件

核心问题点 #

• Node.js服务端已引入body-parser中间件但未挂载，无法解析POST请求的请求体，导致req.body为undefined
• POST路由处理逻辑未返回任何响应，前端AJAX请求会抛出超时/无响应错误
• 直接将数值写入Data.json，不符合JSON文件的语法规范
• 若前端页面未部署在localhost:8080下，会触发跨域资源共享限制，导致请求被拦截
• 相对路径写文件容易出现路径找不到问题，建议用绝对路径定位JSON文件

修正后的代码 #

前端JS代码 #

function WriteToJSON() {
    var floors = document.getElementById("floor-number").value;
    $.ajax({
        type: "POST",
        url: "http://localhost:8080/getfloors",
        dataType :"text",
        data: {Floors: floors},
        // 可选添加回调排查错误
        success: () => console.log("提交成功"),
        error: (err) => console.log("提交失败", err)
    })
}

Node.js服务端代码 #

var http = require('http');
var fs = require('fs');
var url = require('url');
const path = require('path');
var express = require('express');
var serveStatic = require('serve-static');
const { Router } = require('express');
const app = express();
var bodyParser = require('body-parser')
const port = process.env.PORT || 8080;

// 新增：挂载body-parser解析POST请求体
app.use(bodyParser.urlencoded({ extended: true }));
// 若前端传JSON格式数据，额外添加下面这行
// app.use(bodyParser.json());

 app.get("/", function(req, res) {
   res.sendFile(path.join(__dirname, '/welcome-page.html'))
 })

 app.get("/Question-1", function(req, res) {
  res.sendFile(path.join(__dirname, '/Question-1.html'))
})

app.post("/getfloors", (req, res) => {
  var floors = req.body.Floors;
  console.log(floors);
  // 修正：写入合法JSON格式，使用绝对路径避免路径错误
  fs.writeFileSync(path.join(__dirname, 'Data.json'), JSON.stringify({Floors: floors}), 'utf8');
  // 新增：返回响应告知前端请求完成
  res.sendStatus(200);
})

app.listen(port, () => console.log(`服务已启动，端口${port}`));

内容的提问来源于stack exchange，提问作者Raptor Galaxy