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 依赖项如下：

  1.        <dependency>
  2.             <groupId>org.springframework.boot</groupId>
  3.             <artifactId>spring-boot-starter-web</artifactId>
  4.         </dependency>
  5.  
  6.         <dependency>
  7.             <groupId>org.springframework.boot</groupId>
  8.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  9.         </dependency>
  10.  
  11.         <dependency>
  12.             <groupId>org.springframework.boot</groupId>
  13.             <artifactId>spring-boot-devtools</artifactId>
  14.         </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

  1. package com.example.demo;
  2.  
  3. public class User {
  4.     String name;
  5.     Integer sex;
  6.     String[] MyColors;
  7.  
  8.     public String getName() {
  9.         return name;
  10.     }
  11.     public void setName(String name) {
  12.         this.name = name;
  13.     }
  14.     public Integer getSex() {
  15.         return sex;
  16.     }
  17.     public void setSex(Integer sex) {
  18.         this.sex = sex;
  19.     }
  20.     public String[] getMyColors() {
  21.         return MyColors;
  22.     }
  23.     public void setMyColors(String[] myColors) {
  24.         MyColors = myColors;
  25.     }
  26. }

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

  1. package com.example.demo;
  2.  
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.ui.Model;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6.  
  7. import java.util.HashMap;
  8. import java.util.Map;
  9.  
  10. @Controller
  11. public class FieldController {
  12.     @RequestMapping("/field")
  13.     public String field(Model model){
  14.         //设置用户对象
  15.         User user = new User();
  16.         user.setName("小红");
  17.         user.setSex(0);
  18.         model.addAttribute("user", user);
  19.         //设置性别
  20.         Map<String, Object> sexes = new HashMap<String, Object>();
  21.         sexes.put("男", 1);
  22.         sexes.put("女", 0);
  23.         model.addAttribute("sexes", sexes);
  24.         return "field";
  25.     }
  26. }

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用th:field属性</title>
  6. </head>
  7. <body>
  8.     <form th:object="${user}">
  9.         <input type="text" th:field="*{name}" id="name1" />
  10.         <input type="text" th:field="*{name}" />
  11.         <input type="text" th:field="*{name}" />
  12.         <textarea th:field="*{name}"></textarea>
  13.         <textarea th:field="*{name}"></textarea>
  14.         <select th:field="*{sex}">
  15.             <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
  16.         </select>
  17.         <select th:field="*{sex}">
  18.             <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
  19.         </select>
  20.         <input type="checkbox" th:field="*{name}" value="*{name}"/>
  21.         <input type="checkbox" th:field="*{name}" value="*{name}"/>
  22.         <input type="radio" th:field="*{name}" value="*{name}"/>
  23.         <input type="radio" th:field="*{name}" value="*{name}"/>
  24.     </form>
  25. </body>
  26. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用th:field属性</title>
  6. </head>
  7. <body>
  8.     <form>
  9.         <input type="text" id="name1" name="name" value="小红" />
  10.         <input type="text" id="name" name="name" value="小红" />
  11.         <input type="text" id="name" name="name" value="小红" />
  12.         <textarea id="name" name="name">小红</textarea>
  13.         <textarea id="name" name="name">小红</textarea>
  14.         <select id="sex" name="sex">
  15.             <option value="0" selected="selected">女</option>
  16.             <option value="1">男</option>
  17.         </select>
  18.         <select id="sex" name="sex">
  19.             <option value="0" selected="selected">女</option>
  20.             <option value="1">男</option>
  21.         </select>
  22.         <input type="checkbox" value="*{name}" id="name1" name="name"/><input type="hidden" name="_name" value="on"/>
  23.         <input type="checkbox" value="*{name}" id="name2" name="name"/><input type="hidden" name="_name" value="on"/>
  24.         <input type="radio" value="*{name}" id="name3" name="name"/>
  25.         <input type="radio" value="*{name}" id="name4" name="name"/>
  26.     </form>
  27. </body>
  28. </html>

二、使用ids对象

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

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

  1. package com.example.demo;
  2.  
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.ui.Model;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6.  
  7. @Controller
  8. public class IdsController {
  9.     @RequestMapping("/ids")
  10.     public String ids(Model model){
  11.         User user = new User();
  12.         user.setName("小红");
  13.         user.setSex(0);
  14.         model.addAttribute("user", user);
  15.         return "ids";
  16.     }
  17. }

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用ids对象</title>
  6. </head>
  7. <body>
  8.     <form th:object="${user}">
  9.         <input type="text" th:field="*{name}" th:id="${#ids.seq('tname')}" />
  10.         <input type="text" th:field="*{name}" th:id="${#ids.seq('tname')}" />
  11.  
  12.         <input type="radio" th:field="*{name}" value="*{name}" th:id="${#ids.seq('rname')}"/>
  13.         <input type="radio" th:field="*{name}" value="*{name}" th:id="${#ids.seq('rname')}"/>
  14.  
  15.         <input type="checkbox" th:field="*{name}" value="*{name}" th:id="${#ids.seq('cname')}" />
  16.         <input type="checkbox" th:field="*{name}" value="*{name}" th:id="${#ids.seq('cname')}"/>
  17.  
  18.         <input type="radio" th:field="*{name}" value="*{name}" />
  19.         <label th:for="${#ids.prev('name')}" th:text="单选A"></label>
  20.         <input type="radio" th:field="*{name}" value="*{name}" />
  21.         <label th:for="${#ids.prev('name')}" th:text="单选B"></label>
  22.  
  23.         <label th:for="${#ids.next('name')}" th:text="多选A"></label>
  24.         <input type="checkbox" th:field="*{name}" value="*{name}" />
  25.         <label th:for="${#ids.next('name')}" th:text="多选B"></label>
  26.         <input type="checkbox" th:field="*{name}" value="*{name}" />
  27.     </form>
  28. </body>
  29. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用ids对象</title>
  6. </head>
  7. <body>
  8.     <form>
  9.         <input type="text" id="tname1" name="name" value="小红" />
  10.         <input type="text" id="tname2" name="name" value="小红" />
  11.  
  12.         <input type="radio" value="*{name}" id="rname1" name="name"/>
  13.         <input type="radio" value="*{name}" id="rname2" name="name"/>
  14.  
  15.         <input type="checkbox" value="*{name}" id="cname1" name="name" /><input type="hidden" name="_name" value="on"/>
  16.         <input type="checkbox" value="*{name}" id="cname2" name="name"/><input type="hidden" name="_name" value="on"/>
  17.  
  18.         <input type="radio" value="*{name}" id="name1" name="name" />
  19.         <label for="name1">单选A</label>
  20.         <input type="radio" value="*{name}" id="name2" name="name" />
  21.         <label for="name2">单选B</label>
  22.  
  23.         <label for="name3">多选A</label>
  24.         <input type="checkbox" value="*{name}" id="name3" name="name" /><input type="hidden" name="_name" value="on"/>
  25.         <label for="name4">多选B</label>
  26.         <input type="checkbox" value="*{name}" id="name4" name="name" /><input type="hidden" name="_name" value="on"/>
  27.     </form>
  28. </body>
  29. </html>

三、表单的提交处理

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

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

  1. package com.example.demo;
  2.  
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.ui.Model;
  5. import org.springframework.web.bind.annotation.ModelAttribute;
  6. import org.springframework.web.bind.annotation.PostMapping;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8.  
  9. import java.util.Arrays;
  10. import java.util.HashMap;
  11. import java.util.Map;
  12.  
  13. @Controller
  14. public class FormController {
  15.     @RequestMapping("/form")
  16.     public String form(Model model){
  17.         setConstant(model);
  18.         User user = new User();
  19.         user.setName("小明");
  20.         user.setSex(1);
  21.         user.setMyColors(new String[]{"white", "black"});
  22.         model.addAttribute("user", user);
  23.         return "form";
  24.     }
  25.  
  26.     @PostMapping("/submit")
  27.     public String submit(@ModelAttribute User user, Model model){
  28.         setConstant(model);
  29.         model.addAttribute("user", user);
  30.         System.out.println("姓名：" + user.getName());
  31.         System.out.println("性别：" + (user.getSex().intValue() == 1 ? "男" : "女"));
  32.         System.out.println("喜欢的颜色：" + Arrays.toString(user.getMyColors()));
  33.         //return "redirect:/form";
  34.         return "form";
  35.     }
  36.  
  37.     //设置常量
  38.     private void setConstant(Model model){
  39.         Map<String, Object> sexes = new HashMap<String, Object>();
  40.         sexes.put("男", 1);
  41.         sexes.put("女", 0);
  42.         model.addAttribute("sexes", sexes);
  43.         String[] colors = new String[]{"red", "white", "black"};
  44.         model.addAttribute("colors", colors);
  45.     }
  46. }

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单的提交处理</title>
  6. </head>
  7. <body>
  8.     <form method="post" th:action="@{/submit}" th:object="${user}">
  9.        <table>
  10.            <tr>
  11.                <td>用户名：</td>
  12.                <td><input type="text" th:field="*{name}" /></td>
  13.            </tr>
  14.            <tr>
  15.                <td>性别：</td>
  16.                <td><select th:field="*{sex}">
  17.                        <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
  18.                     </select>
  19.                </td>
  20.            </tr>
  21.            <tr>
  22.                <td>喜欢的颜色：</td>
  23.                <td>
  24.                    <span th:each="color : ${colors}">
  25.                        <input type="checkbox"  th:field="*{myColors}" th:value="${color}" />
  26.                        <label th:for="${#ids.prev('myColors')}" th:text="${color}"></label>
  27.                    </span>
  28.                </td>
  29.            </tr>
  30.            <tr>
  31.                <td colspan="2">
  32.                    <input type="submit" value="提交" />
  33.                </td>
  34.            </tr>
  35.  
  36.        </table>
  37.  
  38.     </form>
  39. </body>
  40. </html>

启动服务后，浏览器访问http://localhost:8080/from，页面如下图：

网页源代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单的提交处理</title>
  6. </head>
  7. <body>
  8.     <form method="post" action="/submit">
  9.        <table>
  10.            <tr>
  11.                <td>用户名：</td>
  12.                <td><input type="text" id="name" name="name" value="小明" /></td>
  13.            </tr>
  14.            <tr>
  15.                <td>性别：</td>
  16.                <td><select id="sex" name="sex">
  17.                        <option value="0">女</option>
  18.                        <option value="1" selected="selected">男</option>
  19.                     </select>
  20.                </td>
  21.            </tr>
  22.            <tr>
  23.                <td>喜欢的颜色：</td>
  24.                <td>
  25.                    <span>
  26.                        <input type="checkbox"  value="red" id="myColors1" name="myColors" /><input type="hidden" name="_myColors" value="on"/>
  27.                        <label for="myColors1">red</label>
  28.                    </span><span>
  29.                        <input type="checkbox"  value="white" id="myColors2" name="myColors" checked="checked" /><input type="hidden" name="_myColors" value="on"/>
  30.                        <label for="myColors2">white</label>
  31.                    </span><span>
  32.                        <input type="checkbox"  value="black" id="myColors3" name="myColors" checked="checked" /><input type="hidden" name="_myColors" value="on"/>
  33.                        <label for="myColors3">black</label>
  34.                    </span>
  35.                </td>
  36.            </tr>
  37.            <tr>
  38.                <td colspan="2">
  39.                    <input type="submit" value="提交" />
  40.                </td>
  41.            </tr>
  42.  
  43.        </table>
  44.  
  45.     </form>
  46. </body>
  47. </html>

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

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

Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理的更多相关文章

  1. 一个小demo熟悉Spring Boot 和 thymeleaf 的基本使用

    目录 介绍 零.项目素材 一. 创建 Spring Boot 项目 二.定制首页 1.修改 pom.xml 2.引入相应的本地 css.js 文件 3.编辑 login.html 4.处理对 logi ...

  2. Spring Boot(十五)：spring boot+jpa+thymeleaf增删改查示例

    Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例 一.快速上手 1,配置文件 (1)pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 ...

  3. Spring Boot2 系列教程(九)Spring Boot 整合 Thymeleaf

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  4. 极简 Spring Boot 整合 Thymeleaf 页面模板

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  5. Spring Boot和Thymeleaf整合，结合JPA实现分页效果

    在项目里,我需要做一个Spring Boot结合Thymeleaf前端模版,结合JPA实现分页的演示效果.做的时候发现有些问题,也查了现有网上的不少文档,发现能全栈实现的不多,所以这里我就把我的做法, ...

  6. 如何设置织梦cms自定义表单字段为必填项

    1.编辑器打开\plus\diy.php2.在40行左右找到此行代码:$dede_fields = empty($dede_fields) ? '' : trim($dede_fields);3.在这 ...

  7. Spring Boot整合 Thymeleaf 模板引擎

    什么是Thymeleaf Thymeleaf是一款用于渲染XML.XHTML.HTML5内容的模板引擎.类似Velocity,FreeMaker模板引擎,它也可以轻易的与Spring MVC等Web框 ...

  8. spring boot 与 thymeleaf (2): 常用表达式

    在asp.net mvc 中, 有一个视图解析器, 可以支持Razor语法. 使用起来, 是非常的方便, 并且, 写在前台页面的后台方法, 是可调试的. 但是在java中, 目前我还没有接触到, 像. ...

  9. 嵌入式表单字段中的内容可能被server更改以删除不安全的内容。是否要又一次载入您的页面以查看保存结果？

    嵌入式表单字段中的内容可能被server更改以删除不安全的内容.是否要又一次载入您的页面以查看保存结果?         近期有朋友问到,当他在SharePoint首页上进行编辑时.插入一段代码. 完 ...

随机推荐

  1. Cesium专栏-雷达遮罩动态扫描（附源码下载）

    Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...

  2. linux查看磁盘及文件夹大小命令

    https://www.runoob.com/w3cnote/linux-view-disk-space.html 1.使用lsof查看已删除但未释放的文件 lsof -n | grep delete ...

  3. C# ling to sql 取多条记录最大时间

    var _setList = (from f in _postgreDbContext.settlements group f by ( new { f.settlement_code })into ...

  4. Chilkat9.5.0.75(x86+x64)ActiveX+注册机

    链接:https://pan.baidu.com/s/1GiUnlcRX1pLDiF6yVnBnVQ  密码:ivfv

  5. 与用户xxx一起提供的密码不正确。请确认输入的密码正确并重试

    环境: SharePoint 2010 / 2013 以系统账户身份登录管理中心,然后创建Web Application,报: 与用户xxx一起提供的密码不正确.请确认输入的密码正确并重试 明明都已经 ...

  6. 【Objective-C】Objective-C语言的动态性

    Objective-C语言的动态性主要体现在以下3个方面 (1)动态类型:运行时确定对象的类型. (2)动态绑定:运行时确定对象的方法. (3)动态加载:运行时加载需要的资源或者或代码模块. 一.动态 ...

  7. 《精通Python爬虫框架Scrapy》学习资料

    <精通Python爬虫框架Scrapy>学习资料 百度网盘:https://pan.baidu.com/s/1ACOYulLLpp9J7Q7src2rVA

  8. Go Modules使用教程

    Go Modules 不完全教程 文章转载自公众号 Golang 成神之路 , 作者 L Go Modules 是 Golang 官方最近几个版本推出的原生的包管理方式,在此之前,社区也不乏多种包管理 ...

  9. MS SQL 批量操作

    MS SQL支持 sysobject,因此可以用以下条件语句查询表对象 select Name from sysobjects where xtype='U' and Name like 'dnt_% ...

  10. 每天学点HTML01

    HTML背景 HTML 又叫超文本标记语言 ,诞生于20世纪90年代初 <html> <head><title>demo1</title> </h ...