HTML表单无法传递对象至PUT路由，req.body.product返回undefined

我懂你碰到的这个坑——想用HTML表单把数据以product对象的形式传到PUT路由，结果console.log(req.body.product)一直输出undefined，但单独用name="title"、name="price"这种字段就完全正常。这其实是HTML表单默认的编码格式不支持直接传递嵌套对象导致的，下面给你两种实用的解决方案：

方案1：调整表单字段的name属性（最直接，无需额外JS） #

HTML表单默认发送的是application/x-www-form-urlencoded格式，这种格式支持通过name="product[字段名]"的写法来构建嵌套对象。你只需要修改表单里输入框的name属性：

比如原来的字段：

<input type="text" name="title">
<input type="number" name="price">

改成：

<input type="text" name="product[title]">
<input type="number" name="product[price]">

这样表单提交后，Express的urlencoded中间件会自动把这些字段解析成req.body.product对象，你的路由里就能正常拿到包含title和price的完整对象了。

方案2：用JavaScript处理表单提交（传递JSON格式） #

如果你更倾向于直接传递JSON结构的对象，就需要借助JS拦截表单提交，手动构造JSON数据并发送请求。步骤如下：

1. 给表单加个ID方便获取：

<form id="productForm" action="/events/<%= product._id %>" method="POST">
  <input type="text" id="title" value="<%= product.title %>">
  <input type="number" id="price" value="<%= product.price %>">
  <button type="submit">提交</button>
</form>

2. 添加JS代码处理提交逻辑：

document.getElementById('productForm').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止默认表单提交行为

  const productId = this.action.split('/').pop();
  const productData = {
    product: {
      title: document.getElementById('title').value,
      price: parseFloat(document.getElementById('price').value)
    }
  };

  try {
    const response = await fetch(`/events/${productId}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        // 如果你用的是_method参数的method-override，也可以直接在URL加?_method=PUT
        // 'X-HTTP-Method-Override': 'PUT'
      },
      body: JSON.stringify(productData)
    });

    if (response.ok) {
      window.location.href = '/events/';
    }
  } catch (err) {
    console.error('提交失败:', err);
  }
});

注意：这种方式需要确保你的Express应用已经配置了express.json()中间件，用来解析JSON格式的请求体：

app.use(express.json());

同时确认method-override的配置正确，比如：

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

两种方案都能解决你的问题，第一种适合传统表单场景，简单省心；第二种适合需要传递复杂JSON结构的场景。

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