当前位置：移动技术网 > IT编程>开发语言>Java > Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

2019年10月21日 | 移动技术网IT编程 | 我要评论

spring boot中thymeleaf对表单处理的一些用法：
(1)使用th:field属性：进行表单字段绑定
(2)使用ids对象：一般用于lable配合radio或checkbox使用
(3)表单提交处理

开发环境：intellij idea 2019.2.2
spring boot版本：2.1.8

新建一个名称为demo的spring boot项目。
pom.xml 依赖项如下：

       <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-web</artifactid>
        </dependency>

        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-thymeleaf</artifactid>
        </dependency>

        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-devtools</artifactid>
        </dependency>

一、使用th:field属性

th:field属性常用于表单字段绑定，除了自动生成id和name属性，对不同的节点类型还会有不同的生成逻辑。
例如input还会再生成value属性，textarea会自动设文本，select会自动选中相应的选项，如果是同个表单属性，radio和checkbox的id会全局自动增长。
备注：
(1)使用th:field属性时，如果html节点中已经存在相应属性，则不会再另外生成。
(2)th:field属性需要使用星号表达式*{...}，即先使用th:object声明表单对象，再使用th:field=*{...}对表单域进行处理。

1、src/main/java/com/example/demo/user.java

package com.example.demo;

public class user {
    string name;
    integer sex;
    string[] mycolors;

    public string getname() {
        return name;
    }
    public void setname(string name) {
        this.name = name;
    }
    public integer getsex() {
        return sex;
    }
    public void setsex(integer sex) {
        this.sex = sex;
    }
    public string[] getmycolors() {
        return mycolors;
    }
    public void setmycolors(string[] mycolors) {
        mycolors = mycolors;
    }
}

2、src/main/java/com/example/demo/fieldcontroller.java

package com.example.demo;

import org.springframework.stereotype.controller;
import org.springframework.ui.model;
import org.springframework.web.bind.annotation.requestmapping;

import java.util.hashmap;
import java.util.map;

@controller
public class fieldcontroller {
    @requestmapping("/field")
    public string field(model model){
        //设置用户对象
        user user = new user();
        user.setname("小红");
        user.setsex(0);
        model.addattribute("user", user);
        //设置性别
        map<string, object> sexes = new hashmap<string, object>();
        sexes.put("男", 1);
        sexes.put("女", 0);
        model.addattribute("sexes", sexes);
        return "field";
    }
}

3、src/main/resources/templates/field.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用th:field属性</title>
</head>
<body>
    <form th:object="${user}">
        <input type="text" th:field="*{name}" id="name1" />
        <input type="text" th:field="*{name}" />
        <input type="text" th:field="*{name}" />
        <textarea th:field="*{name}"></textarea>
        <textarea th:field="*{name}"></textarea>
        <select th:field="*{sex}">
            <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
        </select>
        <select th:field="*{sex}">
            <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
        </select>
        <input type="checkbox" th:field="*{name}" value="*{name}"/>
        <input type="checkbox" th:field="*{name}" value="*{name}"/>
        <input type="radio" th:field="*{name}" value="*{name}"/>
        <input type="radio" th:field="*{name}" value="*{name}"/>
    </form>
</body>
</html>

启动服务后，浏览器访问http://localhost:8080/field，网页源代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用th:field属性</title>
</head>
<body>
    <form>
        <input type="text" id="name1" name="name" value="小红" />
        <input type="text" id="name" name="name" value="小红" />
        <input type="text" id="name" name="name" value="小红" />
        <textarea id="name" name="name">小红</textarea>
        <textarea id="name" name="name">小红</textarea>
        <select id="sex" name="sex">
            <option value="0" selected="selected">女</option>
            <option value="1">男</option>
        </select>
        <select id="sex" name="sex">
            <option value="0" selected="selected">女</option>
            <option value="1">男</option>
        </select>
        <input type="checkbox" value="*{name}" id="name1" name="name"/><input type="hidden" name="_name" value="on"/>
        <input type="checkbox" value="*{name}" id="name2" name="name"/><input type="hidden" name="_name" value="on"/>
        <input type="radio" value="*{name}" id="name3" name="name"/>
        <input type="radio" value="*{name}" id="name4" name="name"/>
    </form>
</body>
</html>

二、使用ids对象

可以使用ids对象的seq方法生成指定名称的递增id。
对于radio和checkbox自动生成的id，配合lable节点使用时，需要知道这个id，可以使用ids对象的prev和next方法。

1、src/main/java/com/example/demo/idscontroller.java

package com.example.demo;

import org.springframework.stereotype.controller;
import org.springframework.ui.model;
import org.springframework.web.bind.annotation.requestmapping;

@controller
public class idscontroller {
    @requestmapping("/ids")
    public string ids(model model){
        user user = new user();
        user.setname("小红");
        user.setsex(0);
        model.addattribute("user", user);
        return "ids";
    }
}

2、src/main/resources/templates/ids.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用ids对象</title>
</head>
<body>
    <form th:object="${user}">
        <input type="text" th:field="*{name}" th:id="${#ids.seq('tname')}" />
        <input type="text" th:field="*{name}" th:id="${#ids.seq('tname')}" />

        <input type="radio" th:field="*{name}" value="*{name}" th:id="${#ids.seq('rname')}"/>
        <input type="radio" th:field="*{name}" value="*{name}" th:id="${#ids.seq('rname')}"/>

        <input type="checkbox" th:field="*{name}" value="*{name}" th:id="${#ids.seq('cname')}" />
        <input type="checkbox" th:field="*{name}" value="*{name}" th:id="${#ids.seq('cname')}"/>

        <input type="radio" th:field="*{name}" value="*{name}" />
        <label th:for="${#ids.prev('name')}" th:text="单选a"></label>
        <input type="radio" th:field="*{name}" value="*{name}" />
        <label th:for="${#ids.prev('name')}" th:text="单选b"></label>

        <label th:for="${#ids.next('name')}" th:text="多选a"></label>
        <input type="checkbox" th:field="*{name}" value="*{name}" />
        <label th:for="${#ids.next('name')}" th:text="多选b"></label>
        <input type="checkbox" th:field="*{name}" value="*{name}" />
    </form>
</body>
</html>

启动服务后，浏览器访问http://localhost:8080/ids，网页源代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用ids对象</title>
</head>
<body>
    <form>
        <input type="text" id="tname1" name="name" value="小红" />
        <input type="text" id="tname2" name="name" value="小红" />

        <input type="radio" value="*{name}" id="rname1" name="name"/>
        <input type="radio" value="*{name}" id="rname2" name="name"/>

        <input type="checkbox" value="*{name}" id="cname1" name="name" /><input type="hidden" name="_name" value="on"/>
        <input type="checkbox" value="*{name}" id="cname2" name="name"/><input type="hidden" name="_name" value="on"/>

        <input type="radio" value="*{name}" id="name1" name="name" />
        <label for="name1">单选a</label>
        <input type="radio" value="*{name}" id="name2" name="name" />
        <label for="name2">单选b</label>

        <label for="name3">多选a</label>
        <input type="checkbox" value="*{name}" id="name3" name="name" /><input type="hidden" name="_name" value="on"/>
        <label for="name4">多选b</label>
        <input type="checkbox" value="*{name}" id="name4" name="name" /><input type="hidden" name="_name" value="on"/>
    </form>
</body>
</html>

三、表单的提交处理

提交后，在控制器方法中使用@modelattribute映射表单对象。

1、src/main/java/com/example/demo/formcontroller.java

package com.example.demo;

import org.springframework.stereotype.controller;
import org.springframework.ui.model;
import org.springframework.web.bind.annotation.modelattribute;
import org.springframework.web.bind.annotation.postmapping;
import org.springframework.web.bind.annotation.requestmapping;

import java.util.arrays;
import java.util.hashmap;
import java.util.map;

@controller
public class formcontroller {
    @requestmapping("/form")
    public string form(model model){
        setconstant(model);
        user user = new user();
        user.setname("小明");
        user.setsex(1);
        user.setmycolors(new string[]{"white", "black"});
        model.addattribute("user", user);
        return "form";
    }

    @postmapping("/submit")
    public string submit(@modelattribute user user, model model){
        setconstant(model);
        model.addattribute("user", user);
        system.out.println("姓名：" + user.getname());
        system.out.println("性别：" + (user.getsex().intvalue() == 1 ? "男" : "女"));
        system.out.println("喜欢的颜色：" + arrays.tostring(user.getmycolors()));
        //return "redirect:/form";
        return "form";
    }

    //设置常量
    private void setconstant(model model){
        map<string, object> sexes = new hashmap<string, object>();
        sexes.put("男", 1);
        sexes.put("女", 0);
        model.addattribute("sexes", sexes);
        string[] colors = new string[]{"red", "white", "black"};
        model.addattribute("colors", colors);
    }
}

2、src/main/resources/templates/form.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单的提交处理</title>
</head>
<body>
    <form method="post" th:action="@{/submit}" th:object="${user}">
       <table>
           <tr>
               <td>用户名：</td>
               <td><input type="text" th:field="*{name}" /></td>
           </tr>
           <tr>
               <td>性别：</td>
               <td><select th:field="*{sex}">
                       <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
                    </select>
               </td>
           </tr>
           <tr>
               <td>喜欢的颜色：</td>
               <td>
                   <span th:each="color : ${colors}">
                       <input type="checkbox"  th:field="*{mycolors}" th:value="${color}" />
                       <label th:for="${#ids.prev('mycolors')}" th:text="${color}"></label>
                   </span>
               </td>
           </tr>
           <tr>
               <td colspan="2">
                   <input type="submit" value="提交" />
               </td>
           </tr>

       </table>



    </form>
</body>
</html>

启动服务后，浏览器访问http://www.lhsxpumps.com/_localhost:8080/from，页面如下图：

网页源代码如下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单的提交处理</title>
</head>
<body>
    <form method="post" action="/submit">
       <table>
           <tr>
               <td>用户名：</td>
               <td><input type="text" id="name" name="name" value="小明" /></td>
           </tr>
           <tr>
               <td>性别：</td>
               <td><select id="sex" name="sex">
                       <option value="0">女</option>
                       <option value="1" selected="selected">男</option>
                    </select>
               </td>
           </tr>
           <tr>
               <td>喜欢的颜色：</td>
               <td>
                   <span>
                       <input type="checkbox"  value="red" id="mycolors1" name="mycolors" /><input type="hidden" name="_mycolors" value="on"/>
                       <label for="mycolors1">red</label>
                   </span><span>
                       <input type="checkbox"  value="white" id="mycolors2" name="mycolors" checked="checked" /><input type="hidden" name="_mycolors" value="on"/>
                       <label for="mycolors2">white</label>
                   </span><span>
                       <input type="checkbox"  value="black" id="mycolors3" name="mycolors" checked="checked" /><input type="hidden" name="_mycolors" value="on"/>
                       <label for="mycolors3">black</label>
                   </span>
               </td>
           </tr>
           <tr>
               <td colspan="2">
                   <input type="submit" value="提交" />
               </td>
           </tr>

       </table>



    </form>
</body>
</html>

点击提交按钮，idea控制台输出：

姓名：小明
性别：男
喜欢的颜色：[white, black]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Java编程必备软件

一、IDEA概述IDEA是一款专门针对Java的集成开发工具(IDE)，由Java语言编写。所以，需要有JRE运... [阅读全文]
Java中对象的序列化和反序列化操作

Java的IO流不仅可以对字符进行传输，也可以对对象进行传输，叫做对象的序列化和反序列化序列化：将对象转为方便传... [阅读全文]
荐深入理解Java中的BigInteger和 BigDecimal，再也不怕面试了

Integer类作为int的包装类，能存储的最大整型值为2^31-1 ，Long类最大为2^63-1，虽然比In... [阅读全文]
tomact正常启动，但是在日志文件报错java.lang.NoClassDefFoundError: java/util/logging/Logger

启动tomcat，显示正常启动tomcat这个小人，表面上Using CATALINA_BASE: /usr... [阅读全文]
面试这样简单解释泛型

通俗简单理解Java中的泛型 [阅读全文]
springboot validation 国际化

springbootvalidation国际化应用：验证注解属性message根据locale显示不同的信息**... [阅读全文]
servlet整合quartz：servlet中使用quartz，服务器启动时加载任务

servlet整合quartz：servlet中使用quartz，服务器启动时加载任务一、写一个servlet实... [阅读全文]
荐 Java——集合中的Map接口通过HashMap类实现一些常用的方法

1.Map接口简介说明：Map接口是一种双列集合，它的每个元素都包含一个键对象 Key 和值对象 Value，键... [阅读全文]
jvm-01

本空间是学习总结，有抄录，也有原创，鞭策自己学习每天需要坚持。 [阅读全文]
SpringBoot整合mybatis访问时报错Invalid bound statement (not found)

最近在学springboot相关知识，在整合mybatis时遇到了一个问题（我这种新手易犯的低级错误）,项目启动... [阅读全文]

网友评论


验证码：

Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

2019年10月21日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论