如何让HTML表单提交到带URL参数的Express路由/images/:s1

问题根源 #

HTML表单使用GET方法提交时，默认会将表单字段作为查询字符串参数拼接在action路径后面，最终生成的请求URL是/images?s1=用户输入。而Express的/images/:s1路由匹配的是路径参数，也就是URL路径部分/images/xxx里的xxx，两者格式不匹配，所以只能命中/images路由。

解决方案 #

方案1：前端拦截表单提交，手动拼接路径参数 #

禁用表单默认提交逻辑，用JS监听提交事件，把输入值拼到路径中跳转，修改后代码如下：

<form id="searchForm" method="GET">
    <input type="text" name="s1" id="s1Input">
    <button type="submit">提交</button>
</form>
<script>
document.getElementById('searchForm').addEventListener('submit', function(e) {
    // 阻止默认提交行为
    e.preventDefault();
    const s1Value = encodeURIComponent(document.getElementById('s1Input').value.trim());
    if (s1Value) {
        // 手动跳转到带路径参数的地址
        window.location.href = `/images/${s1Value}`;
    }
})
</script>

提交后请求地址直接变为/images/用户输入内容，可直接命中/images/:s1路由，在路由中通过req.params.s1即可拿到参数。

方案2：后端配置重定向逻辑 #

如果不想修改前端表单代码，可以在现有/images路由中增加判断，查询参数存在时重定向到带路径参数的地址：

// 注意要放在 /images/:s1 路由前面定义
app.get('/images', (req, res) => {
  const s1 = req.query.s1;
  if (s1) {
    // 重定向到带路径参数的路由
    return res.redirect(`/images/${encodeURIComponent(s1)}`);
  }
  // 无s1参数时的原有业务逻辑
  res.render('images-index');
})

app.get('/images/:s1', (req, res) => {
  // 此处可正常获取路径参数
  const s1 = req.params.s1;
  // 你的业务逻辑
})

该方案无需改动前端代码，兼容性更强。

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