表单提交至MongoDB：点击Allow/Reject按钮提交不同值的实现方案

这是表单提交场景里很常见的需求，最简单可靠的实现方式就是给两个提交按钮分别添加name和value属性——当用户点击某个提交按钮时，浏览器会自动把该按钮的name和value作为表单数据的一部分一起提交，后端就能直接拿到这个标记来区分是Allow还是Reject操作。

步骤1：修改模板代码 #

给两个按钮加上相同的name（比如action），然后分别设置对应的value：

<button align="center" type="submit" name="action" value="allow">Allow</button>
<button type="submit" name="action" value="reject">Reject</button>

步骤2：TypeScript代码无需额外修改 #

你的现有request函数直接使用ref.value提交表单数据即可，因为表单会自动把点击的按钮的name/value加入到表单数据中，ref.value会包含action字段：

request(ref){ 
  // console.log(ref.value); 这里会看到action字段，值是allow或reject
  this.http.post('/api/request', ref.value, {responseType:'text'}).subscribe(data=>{
    // 处理响应
  })
}

步骤3：后端API处理标记 #

在你的Node.js API里，req.body会包含action字段，你可以直接使用它，同时建议补充错误处理和响应逻辑：

app.post('/request', (req, res) => {
  console.log(req.body); // 输出会包含{ ..., action: 'allow' }或{ ..., action: 'reject' }
  var url = "mongodb://localhost:27017/gateway";
  
  mongo.connect(url, (err, db) => {
    if (err) {
      console.error(err);
      return res.status(500).send("数据库连接失败");
    }
    
    var dbo = db.db("gateway");
    dbo.collection("vstrinfo").insertOne(req.body, (insertErr, result) => {
      db.close();
      if (insertErr) {
        console.error(insertErr);
        return res.status(500).send("数据插入失败");
      }
      console.log("文档插入成功");
      res.send("操作成功");
    });
  });
});

为什么这个方案好用？ #

• 完全符合HTML表单的原生行为，不需要额外绑定点击事件、手动修改表单数据，代码简洁可靠
• 兼容性好，所有支持HTML表单的浏览器都能正常工作
• 后端能直接通过表单字段区分操作，不需要额外的参数传递逻辑

内容的提问来源于stack exchange，提问作者i.s.n raju