Thymeleaf 如何获取输入然后重定向到另一个页面

Question

我正在学习 Spring 启动。我有一个具有唯一 ID 的产品列表，我想实现“按 ID 查找”功能，但我不知道该怎么做，我搜索了但得到了完全不同的东西。

我已经有了这样的@Getmapping 方法：

@Getmapping(/products/{id})

如果我在 url 中手动输入 id，我会得到我想要的。但是我想在 HTML 页面中有一个输入框，例如：

<form>
   Look up by id: <input/>
</form>

在我提交表单后，它会重定向到该页面。例如，如果我输入 1，它将转到 localhost:8080/products/1

我一直在搜索，但我得到的只是关于@Postmapping 的信息。

Answer 1

下面的简单代码将引导您找到一个 URL，该 URL 是由 <form> 的 action 属性的基地址与其第一个属性的值串联生成的<input>:

document.querySelector("form").addEventListener("submit",function(ev){
 ev.preventDefault();
 this.action="/product/"+this.querySelector("input").value;
 console.log(this.action); 
 // in real code: uncomment next line!
 // this.submit()
})

<form>
   Look up by id: <input type="text" value="123" />
</form>

在实际代码中，您将删除 console.log() 并取消注释以下行：this.submit().

或者你也可以这样做：

document.querySelector("form").addEventListener("submit",function(ev){
 ev.preventDefault();
 location = "/product/"+this.querySelector("input").value;
})

这会将您重定向到该页面，而无需实际提交表单。

Answer 2

将 @PostMapping 添加到您的控制器：

@Controller
@RequestMapping("/products")
public class ProductController {

  @GetMapping //Controller method for showing the empty form
  public String index(Model model) {
    model.addAttribute("formData", new SearchFormData()); // Create an empty form data object so Thymeleaf can bind to it

    return "index";
  }

  @PostMapping
  public String searchById(SearchFormData formData) {
    return "redirect:/products/" + formData.getId(); //Use the value the user entered in the form to do the redirect
  }

  @GetMapping("/{id}")
  public String showProduct(@PathVariable("id") long id) {
    ...
  }
}

用SearchFormData表示表单字段（本例中只有1个字段）：

public class SearchFormData {
  private long id;

  // getters and setters

并像这样更新 Thymeleaf 模板：

<form th:action="@{/products}" th:method="post" th:object="${formData}">
  <input th:field="*{id}" type="number">
  <button type="submit">Search</button>
</form>

请注意，th:object 的值需要与用于将 SearchFormData 实例添加到模型的名称相匹配。

有关详细信息，请参阅 Form handling with Thymeleaf。

Thymeleaf 如何获取输入然后重定向到另一个页面

Thymleaf how to take an input and then redirect to another page

html

spring-boot

thymeleaf

request-mapping