自学 使用thymeleaf提交form表单给controller(springboot)

        今天我们说一下springboot项目中,前端如何使用thymeleaf提交form表单数据到后台controller中,这与jsp还是有些区别的。
第一步,修改thymeleaf的页面:

<form method="post" th:action="@{/login}" th:object="${user}" class="loginForm">
                <div class="loginInputDiv">
                    <label for="name" class="loginLabel"><img
                            th:src="@{/images/fore/WebsiteImage/2018-04-27_235518.png}"
                            width="38px" height="39px" title="会员名"/></label>
                    <input type="text" th:field="*{userName}" id="name" class="loginInput" placeholder="会员名/邮箱/手机号">
                </div>
                <div class="loginInputDiv">
                    <label for="password" class="loginLabel"><img
                            th:src="@{/images/fore/WebsiteImage/2018-04-27_235533.png}"
                            width="38px" height="39px" title="登录密码"/></label>
                    <input type="password" th:field="*{userPassword}" id="password" class="loginInput">
                </div>
                <input type="submit" class="loginButton" value="登 录">
            </form>

        注意:
        1,th:action 是要跳转的url。
        2,th:object 是后台跳转到登录页面之前时,封装好的POJO实例对象

        点击按钮提交表单之后,根据路径找到相应的controller方法,具体方法如下:

        Controller

	//跳转到登录页面
	//客户get请求一个form页面时,返回的model里有一个空User实例,去绑定页面的th:object,如果没有绑定的话会报错
    @RequestMapping("/toLogin")
    public String toLogin(Model model){
        model.addAttribute("user",new User());
        return "fore/loginPage";//返回到登录页面
    }
    //执行登录操作
    //form表单的提交映射到此处,@ModelAttribute映射页面的th:object,从而将form捕获并封装成User对象
    @RequestMapping("/login")
    public String Login(@ModelAttribute User user){
        System.out.println("===========登录===========");
        System.out.println("==========name:"+user.getUserName());
        System.out.println("===========pwd:"+user.getUserPassword());
        return "fore/homePage";//返回登录成功之后的主页面
    }

        POJO:

public class User {

  private long userId;
  private String userName;
  private String userPassword;
  public String getUserName() {
    return userName;
  }
  public void setUserName(String userName) {
    this.userName = userName;
  }
  public String getUserPassword() {
    return userPassword;
  }
  public void setUserPassword(String userPassword) {
    this.userPassword = userPassword;
  }
}

        运行一下结果,在页面中输入name:mengmeng,密码:123,控制台打印结果:

在这里插入图片描述

        这就说明后台成功接收前端的数据。大家要是觉得不错的话,可以给梦梦点点关注。

  • 17
    点赞
  • 57
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Thymeleaf 是一个用于 Web 和独立环境的现代服务器端 Java 模板引擎,支持 HTML5/XHTML1 和 HTML4,可以与 Spring 框架完美集成。下面是一个使用 Thymeleaf 提交的示例: 1. 在 HTML 中,使用 Thymeleaf 的语法绑定字段和 URL: ```html <form action="#" th:action="@{/submit}" method="post"> <input type="text" name="name" placeholder="Your name"/> <input type="email" name="email" placeholder="Your email"/> <textarea name="message" placeholder="Your message"></textarea> <button type="submit">Send</button> </form> ``` 2. 在 Spring MVC 控制器中,使用 `@PostMapping` 注解处理提交请求: ```java @Controller public class FormController { @PostMapping("/submit") public String submitForm(@RequestParam("name") String name, @RequestParam("email") String email, @RequestParam("message") String message) { // 处理提交数据 // ... return "redirect:/thank-you"; } @GetMapping("/thank-you") public String thankYou() { return "thank-you"; } } ``` 在控制器中,使用 `@PostMapping` 注解处理提交请求,并使用 `@RequestParam` 注解获取字段的值。处理完数据后,使用 `return "redirect:/thank-you"` 重定向到一个感谢页面。 3. 在感谢页面中,使用 Thymeleaf 的语法显示提交成功信息: ```html <h1>Thank you for contacting us, [[${name}]]!</h1> <p>We have received your message:</p> <p>[[${message}]]</p> ``` 在感谢页面中,使用 Thymeleaf 的语法显示提交成功信息,其中 `[[${name}]]` 和 `[[${message}]]` 分别提交的 `name` 和 `message` 字段的值。 这样,就可以使用 Thymeleaf 提交并处理数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦梦~~

你的鼓励是对我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值