如何将 thymeleaf HTML 页面中的数据发送到 MVC spring boot 控制器？答案

【问题标题】：How to send data from thymeleaf HTML page to the MVC spring boot controller?如何将 thymeleaf HTML 页面中的数据发送到 MVC spring boot 控制器？
【发布时间】：2020-04-28 08:12:45
【问题描述】：

我是 thymeleaf 和 spring 的新手，我正在尝试将简单的输入数据从索引页面发送到控制器，因此我创建了一个如下所示的对象 Exchange，它将包含要处理的输入字段。问题是我不断收到图片中显示的错误

这是我的 Exchange 对象

package myprivate.work.MyCurrencyConverter.model;
public class Exchange
{
    private String fromcurrency;
    private String tocurrency;
    private double amount;
    public Exchange(){
       super();
    }
    public Exchange(String fromcurrency, String tocurrency, double amount) {
        super();
        this.fromcurrency = fromcurrency;
        this.tocurrency = tocurrency;
        this.amount = amount;
    }
    public String getFromcurrency() {
        return fromcurrency;
    }
    public void setFromcurrency(String fromcurrency) {
        this.fromcurrency = fromcurrency;
    }
    public String getTocurrency() {
        return tocurrency;
    }
    public void setTocurrency(String tocurrency) {
        this.tocurrency = tocurrency;
    }
    public double getAmount() {
        return amount;
    }
    public void setAmount(double amount) {
        this.amount = amount;
    }
}

这是我在索引中的形式

<form th:action="@{/newexchange}" th:object="${exchange}" method='POST'>
    <p>Select From Currency:</p>
    <p>
        <select th:field="*{fromcurrency}"> <!-- this is line 12 -->
            <option th:value="sek">SEK</option>
            <option th:value="eur">EUR</option>
            <option th:value="usd">USD</option>
            <option th:value="jpy">JPY</option>
        </select>
    </p>
    <p>Select To Currency:</p>
    <p>
        <select th:field="*{tocurrency}">
            <option th:value="sek">SEK</option>
            <option th:value="eur">EUR</option>
            <option th:value="usd">USD</option>
            <option th:value="jpy">JPY</option>
        </select>
    </p>
    <p class="form"><label>Insert New Rate:</label><input type="number" th:field="*{amount}"/>
    </p>
    <p><input name="Convert" type="submit" value="submit"/></p>
</form>

在我的控制器中

@RequestMapping(method = RequestMethod.POST , value = "/newexchange")
public String toExchange(Exchange exchange, BindingResult result)
{
    return "..ok..";
}

这里是

【问题讨论】：

标签： java spring spring-boot spring-mvc thymeleaf

【解决方案1】：

你必须告诉 Thymeleaf 你指的是哪个对象。您必须将 ModelAttribute 传递给页面，以便 Thymeleaf 知道要将属性绑定到哪个对象。

使用星号语法*{...} 计算th:object 上选定对象上的表达式。

类似这样的：

// this method need to show your exchange page
@GetMapping("/exchange")
public String handleGetRegisterRequest(
        @ModelAttribute Exchange exchange) { // your object (Thymeleaf will receive this to bind with the parameters you pass)
    return "exchange"; // the name of your page which contains the exchange informations
}

【讨论】：

【解决方案2】：

我认为您应该在控制器中使用 @ModelAttribute 来捕获 Exchange 对象，如下所示：

Controller:

    @RequestMapping(value = "/showForm", method=RequestMethod.GET)
public String showForm(Model model) {
  Foo foo = new Foo();
  foo.setBar("bar");

  model.addAttribute("foo", foo);
  ...
}

@RequestMapping(value = "/processForm", method=RequestMethod.POST)
public String processForm(@ModelAttribute(value="foo") Foo foo) {
  ...
}


html :

<form action="#" th:action="@{/processForm}" th:object="${foo}" method="post">
  <input type="text" th:field="*{bar}" />
  <input type="submit" />
</form>

Model Data :

public class Foo {
  private String bar;

  public String getBar() {
    return bar;
  }

  public void setBar(String bar) {
    this.bar = bar;
  }
}

【讨论】：

【解决方案3】：

使用@ModelAttribute从索引页面获取数据到Controller-

 @RequestMapping(method = RequestMethod.POST , value = "/newexchange")
    public String toExchange(@ModelAttribute Exchange exchange, BindingResult result)
    {
       logger.logInfo("Exchange Amount->>"+exchange.getAmount());
      return "..ok..";
    }

【讨论】：