如何向POST请求传递表单以外的动态文本及GET参数（Express+EJS场景）

前端EJS侧配置 #

你需要把要提交的额外数据都放到表单的可提交字段内，具体操作如下：

• 新增type="hidden"的隐藏input控件，分别用来存储动态文本和GET参数，给每个隐藏input设置唯一的name属性用于后端取值
• 给select控件绑定change事件，选中值变化时同步更新动态文本的显示内容和对应隐藏input的value属性
• 页面加载时读取当前URL的GET参数，写入对应隐藏input的value属性

示例代码如下：

<!-- EJS表单模板代码 -->
<form action="/submit" method="POST" id="submitForm">
  <!-- 原有下拉选择控件 -->
  <select name="user_selected" id="selectCtrl">
    <option value="opt1">第一选项</option>
    <option value="opt2">第二选项</option>
  </select>
  <!-- 隐藏字段：存储动态文本 -->
  <input type="hidden" name="dynamic_text" id="dynamicTextInput">
  <!-- 隐藏字段：存储GET参数（多个参数可新增多个隐藏字段） -->
  <input type="hidden" name="get_source" id="getSourceInput">
  <!-- 其他原有表单控件 -->
  <button type="submit">提交数据</button>
</form>
<!-- 动态文本展示区域 -->
<div id="dynamicTextShow"></div>

<script>
// 下拉选中变更逻辑
const selectCtrl = document.getElementById('selectCtrl')
const showArea = document.getElementById('dynamicTextShow')
const hiddenInput = document.getElementById('dynamicTextInput')

selectCtrl.addEventListener('change', function() {
  // 自定义动态文本生成规则
  const generatedText = `当前选择的是：${this.options[this.selectedIndex].text}，对应值为${this.value}`
  // 同步更新展示内容和隐藏字段值
  showArea.innerText = generatedText
  hiddenInput.value = generatedText
})

// 页面加载时读取GET参数存入隐藏字段
document.addEventListener('DOMContentLoaded', function() {
  const urlQuery = new URLSearchParams(window.location.search)
  // 读取名为source的GET参数，可根据需求替换为你的参数名
  const sourceVal = urlQuery.get('source') || ''
  document.getElementById('getSourceInput').value = sourceVal
})
</script>

可选方案：如果不想用隐藏字段存GET参数，也可以直接在EJS模板内把GET参数拼接到表单的action属性上，写法为 <form action="/submit?source=<%= query.source %>" method="POST">，后端可直接从req.query中读取该参数。

后端Express侧配置 #

你需要开启表单数据解析中间件，之后即可直接获取所有提交的参数：

const express = require('express')
const app = express()
// 开启x-www-form-urlencoded格式的表单数据解析
app.use(express.urlencoded({ extended: true }))
// 表单页面渲染路由
app.get('/form', (req, res) => {
  // 如果用上述action拼接GET参数的方案，需要把query传给模板
  res.render('form', { query: req.query })
})
// 表单提交处理路由
app.post('/submit', (req, res) => {
  // 所有表单字段都可以从req.body中获取
  const userSelected = req.body.user_selected
  const dynamicText = req.body.dynamic_text
  const getSource = req.body.get_source
  // 如果用action拼接参数的方案，GET参数从req.query中获取
  // const getSource = req.query.source

  // 此处添加你的业务处理逻辑
  res.send('提交完成')
})

app.listen(3000, () => console.log('服务启动在3000端口'))

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