如何在 HTML5 + Thymeleaf 中处理表单提交

Question

我必须提交一个包含大约 30 个输入参数（文本、select、日期选择器）的表单。这些字段映射到两个类。如何映射每个字段以获取控制器中的值。

HTML:

<form id="searchPersonForm" action="#" th:object="${person}" method="post">
<input type="text" class="form-control" id="person_id" th:field="*{person_id}"></input>
<input type="text" class="form-control" id="child_id" th:field="*{child_id}"></input>
</form>

控制器：

    @RequestMapping(value = "/search", method = RequestMethod.POST)
    public String searchQuotation(Person person){

    // Some validation
    return "SearchPerson";
    }

Person.java:

@Entity
@Table(name = "PERSON")
public class Person implements java.io.Serializable {

    @SequenceGenerator(name = "p_id_generator", sequenceName = "PERSON_SEQ", allocationSize = 1)
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO, generator = "p_id_generator")
    private Long person_id;

    public Long getPerson_id() {
        return person_id;
    }

    public void setPerson_id(Long person_id) {
        this.person_id = person_id;
    }
}

Child:java:

public class Child { 

    private Long child_id;

    public Long getChild_id() {
        return child_id;
    }

    public void setChild_id(Long child_id) {
        this.child_id = child_id;
    }
}

这样我就可以从 Person object 访问 person_id。但是如何访问 child_id.

我的应用程序使用 HTML5+Thymeleaf 和 Spring 引导。

任何人都可以帮助解决这个问题。谢谢。

Answer 1

我认为您的问题可能分为两部分，我会尽量一一回答。首先在表单本身上，您将如何到达 child_id 以显示来自表单上另一个对象的字段。由于您的 Person class 没有 Child 关系，因此您需要有 2 个对象。因此，如果您提供表单的第一个控制器如下所示：

@RequestMapping("/")
public String home(Map<String, Object> model) {
    Person person = new Person();
    person.setPerson_id((long)3);
    Child child = new Child();
    child.setChild_id((long)4);
    model.put("person", person);
    model.put("child", child);
    return "home";
}

那么您的表单将如下所示，以显示对象中的每个值。

<form id="searchPersonForm" action="/search" th:object="${person}" method="post">
    <input type="text" class="form-control" id="person.person_id" th:field="*{person_id}"></input>
    <input type="text" class="form-control" id="child.child_id" th:field="${child.child_id}"></input>
    <input type="submit">Submit</input>
</form>

Thymeleaf site 上有一些有用的文档，解释了 th:object 标记如何与范围内的其他表达式交互。在这种情况下，您需要使用 $ 语法直接引用子项。

在接收方，您需要实现一个控制器来拥有 2 个对象。您可能会注意到，我更改了您的表单，为表单字段的 ID 添加了一个对象前缀。因此，如果您的控制器方法如下所示：

@RequestMapping(value = "/search", method = RequestMethod.POST)
public String searchQuotation(Person person, Child child){

    System.out.println("person_id=" + person.getPerson_id());
    System.out.println("child_id=" + child.getChild_id());
    // Some validation
    return "SearchPerson";
}

您将在服务器端看到这些值。让我知道这是否回答了您的问题。

如何在 HTML5 + Thymeleaf 中处理表单提交

How to handle form submission in HTML5 + Thymeleaf

html

forms

thymeleaf

spring-boot