Thymeleaf如何实现输入ID后跳转至对应@GetMapping路径页面

解决方案 #

你遇到的核心问题是原生HTML表单的GET提交默认会把参数作为查询参数拼接在?后，无法直接匹配你写的路径变量格式的@GetMapping接口，可选择以下两种方案实现：

方案1：前端JS拦截表单提交（无后端改动） #

直接修改你的HTML表单，添加少量JS拦截默认提交行为，手动拼接路径跳转即可，代码如下：

<form onsubmit="handleSubmit(event)">
  Look up by id: <input type="number" id="prodId" required>
  <button type="submit">查询</button>
</form>

<script>
function handleSubmit(e) {
  // 阻止表单默认提交
  e.preventDefault();
  const id = document.getElementById('prodId').value.trim();
  if (id) {
    location.href = `/products/${id}`;
  }
}
</script>

方案2：后端新增重定向兼容接口（无前端JS） #

如果不想写前端JS，可以在后端新增一个兼容表单默认提交逻辑的接口，自动重定向到你现有的路径变量接口，代码如下：

后端Java代码

// 新增兼容接口，适配表单GET提交的查询参数格式
@GetMapping("/products")
public String redirectById(@RequestParam Long id) {
    return "redirect:/products/" + id;
}

对应HTML表单代码

<form action="/products" method="get">
  Look up by id: <input type="number" name="id" required>
  <button type="submit">查询</button>
</form>

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