胸腺叶如何接受输入，然后重定向到另一个页面

Question

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

我已经有一个这样的@Get映射方法：

@Getmapping(/products/{id})

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

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

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

我一直在搜索，但我得到的只是关于@Postmap的东西。

Answer 1

下面的简单代码将引导您找到一个URL，该URL是由

js lang-js prettyprint-override">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>

Answer 2

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

@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（在这种情况下只有一个字段）：

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： ject的值需要与用于将SearchFormData实例添加到模型的名称匹配。

有关更多信息，请参阅使用Thymeleaf处理表单。