React前端通过jQuery Ajax传嵌套对象至Node.js后端格式异常求助

你遇到的这个问题确实和jQuery的默认数据序列化方式以及body-parser的配置直接相关，完全可以让后端接收到预期的嵌套对象结构，下面给你两种可行的解决办法：

原因分析 #

jQuery默认会把data里的对象序列化成application/x-www-form-urlencoded格式（也就是你看到的data[name]这种键值对形式），而你的后端配置了bodyParser.urlencoded({ extended: false })——其中extended: false会使用Node.js内置的querystring模块解析数据，这个模块不支持解析嵌套对象的格式，所以就把嵌套结构拆成了扁平的键值对。

解决办法1：发送JSON格式数据（推荐） #

直接让jQuery发送JSON字符串，同时指定contentType为application/json，这样后端的bodyParser.json()就能正确解析出嵌套对象：

修改你的前端Ajax代码：

lendItem(){ 
  let id = "5af3348742afc60ab71d7d80" 
  $.ajax({ 
    url: '/api/items/' + id, 
    method: 'put', 
    contentType: 'application/json', // 指定内容类型为JSON
    data: JSON.stringify({ // 将嵌套对象转为JSON字符串
      'data': { 
        name: "test name", 
        size: { height: 123, weight: 50 } 
      } 
    }), 
    success: (res) => {console.log(res)} 
  }); 
}

这样后端的req.body就会是你预期的嵌套结构：

{
  data: {
    name: "test name",
    size: { height: 123, weight: 50 }
  }
}

解决办法2：修改body-parser的extended配置 #

如果你想继续使用jQuery默认的表单编码格式，可以把body-parser的extended参数设为true，这样会使用qs模块解析数据（这个模块支持嵌套对象解析）：

修改后端的body-parser配置：

app.use(bodyParser.urlencoded({ extended: true })); // 把false改成true

修改后，即使jQuery发送application/x-www-form-urlencoded格式的嵌套数据，后端也能解析出正确的嵌套对象结构。

总结 #

两种方法都能解决问题，但更推荐第一种发送JSON格式数据的方式——这是当前前后端交互的主流方式，数据结构更清晰，也能避免表单编码格式带来的一些限制（比如无法传递复杂的嵌套结构或特殊数据类型）。

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