Spring Boot 2 + Thymeleaf：表單欄位綁定、表單提交處理

来源:https://www.cnblogs.com/gdjlc/archive/2019/10/20/11710664.html
-Advertisement-
Play Games

Spring Boot中Thymeleaf對錶單處理的一些用法： (1)使用th:field屬性：進行表單欄位綁定 (2)使用ids對象：一般用於lable配合radio或checkbox使用 (3)表單提交處理 ...


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://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>
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 高性能Web動畫和渲染原理系列（2）——渲染管線和CPU渲染
    示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. 高性能動畫 動畫的流暢程度通常是以 ( Frame Per Second ，每秒 ...
  • 對JDK動態代理的模擬實現
    對JDK動態代理的模擬 動態代理在JDK中的實現： 來看看newProxyInstance()這個方法在JDK中的定義 它需要三個參數： ClassLoader loader：類載入器，JDK代理中認為由同一個類載入器載入的類生成的對象相同所以要傳入一個載入器，而且在代理對象生成過程中也可能用到類加 ...
  • 設計模式-單例模式code
    package singeton;import java.security.SecureRandom;/** * @author Zero * @since 2019-08-13. * Description: */public class HungrySingleton { private sta ...
  • Java連載43-訪問靜態方法其他註意事項、static關鍵字
    一、其他註意點 1.對於帶有static的方法，我們講過需要用“類名.”的方式進行訪問，但是其實我們使用“引用.”的方式也是可以進行訪問這個方法的舉例。 2.對於上面的特性，為什麼這樣，我想用下麵這個更進一步的例子，也許可以知曉一二了，我們之前講過空指針異常。 這個空指針異常，是指空引用訪問實例相關 ...
  • Java之路---Day06
    2019-10-20-23:13:52 目錄內容: 1.Scanner類 2.匿名對象 3.Random類 4.對象數組 Scanner類 功能:實現鍵盤輸入數據到程式中 使用步驟: 1.導包: import 包路徑.類名稱; 如果需要使用的目標類和當前類位於同一個包下,可以省略導包 只有java. ...
  • [PHP] 基於redis的分散式鎖防止高併發重覆請求
    需求：我們先舉個某系統驗證的列子：(A渠道系統，業務B系統，外部廠商C系統) (1)B業務系統調用A渠道系統，驗證傳入的手機、身份證、姓名三要素是否一致。 (2)A渠道系統再調用外部廠商C系統。 (3)A渠道系統將結果返回給B業務系統。 這3個過程中，(2)過程，調用外部廠商是需要計費的。 當B業務 ...
  • F#周報2019年第42期
    新聞 "TypeShape的性能" ".NET Core 3.0包含.NET Framework API移植項目" "宣告.NET Core 3.1預覽版1" ".NET Core 3.1預覽版1中ASP.NET Core的更新" "文檔管理改善：垂直文檔標簽就在這裡！" "Gradient預覽版6 ...
  • Eureka重要對象簡介
    在進行分析EurekaClient和EurekaServer之間通信的源碼之前，我們首先需要熟悉一下幾個實體類 這個類代表著EurekaClient實例，客戶端向服務端請求註冊時就會攜帶著這個實例，這個實例中包含了當前客戶端的一些基本信息： 這個枚舉中包含了客戶端可能存在的狀態 這個類是服務端用來保 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類