正文

学会Thymeleaf提交表单：步骤详解，轻松实现数据传递

/0 浏览量
0530

在Web开发中，表单是用户与服务器交互的重要方式。Thymeleaf是一个流行的Java模板引擎，它允许我们在Web页面中插入静态和动态内容。学会使用Thymeleaf提交表单，可以让你的Web应用更加灵活和高效。本文将详细介绍如何在Thymeleaf中提交表单，并实现数据的传递。

一、准备工作

在开始之前，请确保你已经：

  1. 安装了Java开发环境。
  2. 创建了一个Spring Boot项目。
  3. 在项目中添加了Thymeleaf依赖。

二、创建表单页面

  1. 在Spring Boot项目中创建一个名为form.html的HTML文件，并将其放在src/main/resources/templates目录下。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表单提交示例</title>
</head>
<body>
    <form th:action="@{/submitForm}" th:method="post">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" th:value="${user.username}" />
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" />
        </div>
        <div>
            <input type="submit" value="提交" />
        </div>
    </form>
</body>
</html>

在上面的代码中，我们创建了一个简单的表单，包含用户名和密码输入框，以及一个提交按钮。th:action="@{/submitForm}"属性指定了表单提交的URL，th:method="post"属性指定了表单提交的方法。

三、处理表单提交

  1. 在Spring Boot项目中创建一个名为FormController的控制器类。
@Controller
public class FormController {

    @GetMapping("/form")
    public String showForm(Model model) {
        User user = new User();
        model.addAttribute("user", user);
        return "form";
    }

    @PostMapping("/submitForm")
    public String submitForm(@ModelAttribute("user") User user) {
        // 处理表单提交逻辑
        System.out.println("用户名：" + user.getUsername());
        System.out.println("密码：" + user.getPassword());
        return "success";
    }
}

在上面的代码中，我们定义了两个方法：showForm用于显示表单页面，submitForm用于处理表单提交。在submitForm方法中，我们通过@ModelAttribute注解将表单数据绑定到User对象上，并打印出用户名和密码。

  1. 在src/main/resources/templates目录下创建一个名为success.html的HTML文件。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>提交成功</title>
</head>
<body>
    <h1>提交成功！</h1>
</body>
</html>

在上面的代码中，我们创建了一个简单的成功页面，用于显示提交成功的消息。

四、测试

  1. 启动Spring Boot项目。
  2. 在浏览器中访问http://localhost:8080/form，你将看到一个包含用户名和密码输入框的表单页面。
  3. 输入用户名和密码，然后点击提交按钮。
  4. 浏览器将跳转到http://localhost:8080/success，你将看到一个提交成功的消息。

恭喜你，你已经学会了在Thymeleaf中提交表单，并实现了数据的传递！希望这篇文章对你有所帮助。

-- 展开阅读全文 --