Node/Express/Pug项目中Vanilla AJAX向后端发送空对象问题

你的问题出在AJAX请求的格式处理和Express后端的请求体解析配置两个核心环节，咱们一步步拆解解决：

1. 前端AJAX请求的两处错误 #

你当前的XHR.send({"incoming": incoming});写法存在两个关键问题：

• XMLHttpRequest默认会直接把JS对象转为字符串[object Object]，后端完全无法识别这是有效数据
• 没有给请求添加Content-Type头，后端不知道该用什么规则解析请求体

前端代码修改： #

function addbkmk(incoming) {
  let XHR = new XMLHttpRequest();
  console.log(`incoming: ${incoming}`); // COMMENT ONE

  XHR.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      ENTRY.value = ''
      let htmlP = document.createElement('p');
      htmlP.appendChild(document.createTextNode(this.responseText));
      SHOW.appendChild(htmlP);
    }
  };

  XHR.open("POST", "/", true);
  // 新增：告诉后端请求体是JSON格式
  XHR.setRequestHeader('Content-Type', 'application/json');
  // 修改：把JS对象序列化为JSON字符串再发送
  XHR.send(JSON.stringify({"incoming": incoming}));
  
  console.log(SHOW.children.length);
}

2. Express后端的解析中间件缺失 #

Express框架默认不会自动解析JSON格式的请求体，必须手动添加对应中间件，否则req.body永远是空对象。

后端配置修改： #

在你的Express主文件（比如app.js）中，在路由注册之前添加JSON解析中间件：

const express = require('express');
const app = express();

// 新增：解析JSON格式的请求体
app.use(express.json());

// 之后再注册你的路由
const router = require('./routes/your-router-file');
app.use('/', router);

另外可以优化后端的日志打印，避免输出无效的[object Object]：

router.post('/', function(req, res, next) {
  console.log('req.body:', req.body); // 这样能正确打印对象内容
  res.status(200).json(req.body);
});

为什么这样修改能解决问题？ #

• 前端设置Content-Type: application/json后，后端明确知道请求体的格式规则
• JSON.stringify()把JS对象转为标准JSON字符串，确保数据能正确传输
• express.json()中间件会自动将JSON请求体解析为JS对象，挂载到req.body供路由使用

修改完成后，你就能在后端拿到正确的请求数据了~

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