如何在POST请求中获取h1标签值提交到Node.js并存入数据库

问题根因 #

HTML 表单默认仅会提交<input>、<select>、<textarea>、<button>这类原生表单控件的内容，你给<h1>标签添加name属性不会被表单识别并纳入提交参数，因此后端无法获取到name字段值。

前端修改方案 #

在表单内部新增一个隐藏的<input>控件，把蛋糕名称存入该控件的value属性，表单提交时就会自动携带该参数，修改后的HTML片段如下：

<div id="main">
    <div class="cake" id="0">
        <div class="text">
        <form method="POST" action="/cart">  
        <img src="/Cakes-images/cake2.jpg" alt="img1" id="img1">
        <h1 id="title">Chocolate Delight</h1>
        <!-- 新增隐藏input传递name参数 -->
        <input type="hidden" name="name" value="Chocolate Delight">
        <label>Select Qty:</label>
        <select id="cake" name="quantity">
            <option value="0.5Kg">0.5Kg</option>
            <option value="1Kg" selected>1Kg</option>
            <option value="2Kg">2Kg</option>
            <option value="3Kg">3Kg</option>
        </select>
        </div>
        <button value="Add to cart" id="add-to-cart" >Add to cart</button>
        </form>
    </div>
</div>

后端代码优化点 #

1. 你现有代码中console.log(req.params.name)写法错误：req.params用于获取路由路径参数（比如/cart/:id里的id），POST请求体的参数需要从req.body中获取，改为console.log(req.body.name)即可调试查看参数值。
2. 注意你的quantity参数值是带Kg单位的字符串（比如1Kg），直接用parseInt转换只会提取到数字部分，如果你需要存储完整的规格信息，可以去掉parseInt直接存req.body.quantity。

修改后的后端参考代码：

router.post('/',async (req,res) => {
    console.log(req.body.name); // 修正参数获取路径
    const carts= new Cart({
        name:req.body.name,
        // 如果需要保留单位就改为 qty: req.body.quantity
        qty:parseInt(req.body.quantity)
    });
    try{
        const a= await carts.save();
        res.json(carts);
        console.log(carts);
    }catch(err) {
        res.send(err);
    }    
})

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