Node.js应用HTML表单POST更新用户失败，Postman可正常执行

我在Node.js应用中尝试通过HTML表单发送POST请求更新用户数据时失败，但使用Postman调用相同路径http://localhost:3000/traning-user/12并传递JSON数据时，更新操作可正常执行。我的需求是通过HTML表单的POST请求完成数据库更新。

相关代码 #

控制器代码 #

// Controller
exports.updatedTraningUserData = (req, res) => {
    const traningId = req.params.id;
    const updatedUserData = req.body; // 从请求体获取更新的用户数据

    // 更新数据库中的用户
    const sql = 'UPDATE traning SET certificationCode = ?, fullName = ?, company = ?, position = ?, email = ?, telephone = ?, date = ?, title = ?, futureTopics = ? WHERE id = ?';
    const values = [updatedUserData.certificationCode, updatedUserData.fullName, updatedUserData.company, updatedUserData.position, updatedUserData.email, updatedUserData.telephone, updatedUserData.date, updatedUserData.title, updatedUserData.futureTopics, traningId];

    db.query(sql, values, (err, results) => {
      if (err) {
        console.error('更新用户出错: ' + err.message);
        res.status(500).send('更新用户失败');
      } else {
        const traningUpdate = results;
        console.log(traningUpdate);
        console.log('用户更新成功');
        res.status(200).send('用户更新成功');
      }
    });
};

traningUser.ejs表单代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>traning User</title>
</head>
<body>
    <h1><%= traning.fullName %></h1>
    <div class="container">
      <form class="is-readonly" action="/traning-user/:id" method="post">
        <div class="form-group">
          <label for="certificationCode">Certification Code</label>
          <input type="text" class="form-control is-disabled" id="certificationCode" placeholder="<%- traning.certificationCode %>" value="<%- traning.certificationCode %>" name="certificationCode" disabled>
        </div>
      <div class="form-group">
          <label for="fullName">Fullname</label>
          <input type="text" class="form-control is-disabled" id="fullName" placeholder="fullName" value="<%- traning.fullName %>" name="fullName" disabled>
        </div>
        <div class="form-group">
          <label for="company">Company</label>
          <input type="text" class="form-control is-disabled" id="company" placeholder="<%- traning.company %>" value="<%- traning.company %>" name="company" disabled>
        </div>
        <!-- 其他表单字段省略 -->
      </form>
    </div>
</body>
</html>

route.js路由代码 #

// routes目录下的traningRoutes.js文件
const express = require('express');
const router = express.Router();
const traningController = require('../controllers/traning');

router.post('/traning', traningController.createTraningUser);
router.delete('/traning/:id', traningController.deleteTraningUsers);
router.get('/traning-user', traningController.getTraningUsers);
router.post('/traning-user/:id', traningController.updatedTraningUserData); // 目标路由
router.get('/display/:id', traningController.test);
router.get('/traning-user/:id', traningController.getTraningUserById);

module.exports = router;

解决方案 #

1. 修正表单action路径 #

表单的action使用了占位符:id，无法被EJS解析为真实用户ID，需替换为当前用户的实际ID：

<form class="is-readonly" action="/traning-user/<%= traning.id %>" method="post">

2. 处理表单元素的disabled属性 #

disabled属性会导致表单元素的值不被提交到服务器，进而使req.body缺失字段。若允许用户修改字段，直接移除disabled；若仅需展示但要提交现有值，替换为readonly：

<input type="text" class="form-control is-disabled" id="certificationCode" placeholder="<%- traning.certificationCode %>" value="<%- traning.certificationCode %>" name="certificationCode" readonly>

3. 配置Express解析表单数据 #

HTML表单默认以application/x-www-form-urlencoded格式提交数据，需确保Express应用在主入口文件（如app.js）中配置对应中间件：

app.use(express.urlencoded({ extended: true }));

注：Postman使用JSON格式时依赖express.json()中间件，但表单提交需单独配置urlencoded

完成以上修改后，HTML表单的POST请求即可正常提交数据并执行数据库更新。

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