点击表单按钮时向Node.js路由传递多变量的实现疑问

完全可以把你拼接好的modelName字符串和表单里的输入字段、单选按钮数据一起传递到Node.js路由，下面给你两种常用的实现方式，你可以根据需求选择：

方式一：通过表单隐藏字段提交（适合页面刷新的场景） #

你可以在表单里添加一个隐藏的输入字段，把modelName的值赋值给它，这样提交表单时这个字符串就会和其他表单数据一起发送到后端路由：

1. 前端HTML与JS
   先在表单里添加隐藏字段，然后用JS把拼接好的modelName赋值给它：

<form action="/your-target-route" method="POST">
  <!-- 你的表单输入字段 -->
  <input type="text" name="inputField" placeholder="输入内容">
  <!-- 单选按钮组 -->
  <input type="radio" name="radioOption" value="option1"> 选项1
  <input type="radio" name="radioOption" value="option2"> 选项2
  <!-- 隐藏字段用来传递modelName -->
  <input type="hidden" id="modelPath" name="modelPath">
  <!-- 提交按钮 -->
  <button type="submit">提交</button>
</form>

<script>
  // 你的现有代码
  var modelName = <%- JSON.stringify(data) %>;
  modelName = "../myData/" + modelName;
  // 给隐藏字段赋值
  document.getElementById('modelPath').value = modelName;
</script>

2. Node.js路由处理
   在对应的路由里，通过req.body获取所有提交的数据（记得先配置express.urlencoded中间件来解析表单数据）：

// 先在app.js里配置中间件
app.use(express.urlencoded({ extended: true }));

// 目标路由
app.post('/your-target-route', (req, res) => {
  // 获取拼接后的modelPath
  const modelPath = req.body.modelPath;
  // 获取表单输入字段
  const inputValue = req.body.inputField;
  // 获取单选按钮选中的值
  const radioValue = req.body.radioOption;

  // 接下来就可以使用这些数据做后续处理了
  console.log('模型路径:', modelPath);
  console.log('输入内容:', inputValue);
  console.log('单选选项:', radioValue);

  res.send('数据接收成功');
});

方式二：通过AJAX异步提交（适合不刷新页面的场景） #

如果不想刷新页面，可以用fetch来异步发送数据，把modelName和表单数据一起打包发送：

1. 前端JS实现
   监听按钮点击事件，收集所有数据后发送：

<form id="myForm">
  <input type="text" name="inputField" placeholder="输入内容">
  <input type="radio" name="radioOption" value="option1"> 选项1
  <input type="radio" name="radioOption" value="option2"> 选项2
  <button type="button" id="submitBtn">提交</button>
</form>

<script>
  var modelName = <%- JSON.stringify(data) %>;
  modelName = "../myData/" + modelName;

  document.getElementById('submitBtn').addEventListener('click', async () => {
    // 收集表单数据
    const formData = new FormData();
    formData.append('modelPath', modelName);
    formData.append('inputField', document.querySelector('input[name="inputField"]').value);
    formData.append('radioOption', document.querySelector('input[name="radioOption"]:checked').value);

    // 发送请求到后端路由
    try {
      const response = await fetch('/your-target-route', {
        method: 'POST',
        body: formData
      });
      const result = await response.text();
      console.log(result);
    } catch (error) {
      console.error('提交失败:', error);
    }
  });
</script>

2. Node.js路由处理
   和方式一的路由处理逻辑一致，同样通过req.body获取所有数据即可。

注意事项 #

• 如果modelName包含敏感信息，推荐使用POST请求（上面的示例都是POST），避免数据暴露在URL中；
• 确保你的Node.js项目已经配置了正确的中间件来解析请求体，比如express.urlencoded（处理表单数据）。

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