项目上用到thymeleaf这个模版,发现参数前后传递是个麻烦,做了下总结:
1.js将data传递到java Controller
在http://dk05408.iteye.com/blog/2101469可以看到
2.将数据从data从Java Controller传递到js 也有了
传递单个参数
java
@RequestMapping(value="/test",method = RequestMethod.POST) public String submit(String name,Model model){ //String name = request.getParameter("name"); // mailClient.send("dongkun01@vcredit.com", name); model.addAttribute("username",name); model.addAttribute("go","ggggggg"); return "account/testhome"; }
testhome.js
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout"> <head> <title>在线业务平台 主页</title> </head> <body> <div id="content" layout:fragment="content" > <h1>Result</h1> <p>Today is: <span th:text="${username}">13 February 2011</span></p> <p>The TestString Is: <span th:text="${go}">ready..</span></p> <a href="">下一步</a> </div> </body> </html>
传递Entity
java
@RequestMapping(value="/register", method=RequestMethod.POST) public String registerFormSubmit(@ModelAttribute CredentialUser user,Model model){ //register.registerAccount(user.getUsername(),"", ""); //auth.register(user.getUsername(), user.getPassword()); model.addAttribute("user", user); return "account/phonevalidation"; }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout"> <head> <title>在线业务平台 主页</title> </head> <body> <div id="content" layout:fragment="content" > <h1>Result</h1> <p th:text="'登录人姓名: ' + ${user.username}" /> <p th:text="'登录人密码 :' + ${user.password}" /> <a href="">下一步</a> </div> </body> </html>
3.有List作为参数传递
@RequestMapping(value="/test",method = RequestMethod.POST) public String submit(String name,Model model){ model.addAttribute("username",name); model.addAttribute("go","ggggggg"); List<Account> accounts = new ArrayList<Account>(); for (int i = 0; i < 10; i++) { Account account = new Account(); account.setId(Long.valueOf(i)); account.setUsername("username"+i); account.setAddress("我的地址"+i); accounts.add(account); } model.addAttribute("accounts", accounts); return "account/testhome"; }
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:social="http://spring.io/springsocial" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout"> <head> <title>在线业务平台 主页</title> </head> <body> <div id="content" layout:fragment="content"> <h1>Result</h1> <p> Today is: <span th:text="${username}">13 February 2011</span> </p> <p> The TestString Is: <span th:text="${go}">ready..</span> </p> <a href="">下一步</a> <p><table> <tr th:each="account : ${accounts}"> <td th:text="${account.username}">...</td> <td th:text="${account.address}">...</td> </tr> </table> </p> </div> </body> </html>
得到的结果:
相关推荐
此外,Thymeleaf还能与其他前端库如Bootstrap、jQuery等无缝协作,提供美观且交互丰富的界面。同时,Thymeleaf的模板在浏览器不执行任何JavaScript的情况下也能正常显示静态内容,提高了用户体验。 在"spring-boot-...
Thymeleaf的强大之处在于它能够处理复杂的条件语句、循环结构、国际化以及与其他技术(如JavaScript、CSS)的集成,极大地简化了前端与后端的交互。 总的来说,Thymeleaf是Java Web开发中的一个重要组件,它的jar包...
7. **数据库集成**:Spring Boot通过`spring-boot-starter-data-jpa`可以方便地与各种数据库进行交互,如MySQL、H2等。Thymeleaf可以用来动态生成表单和显示数据库中的数据。 8. **IDEA集成**:IntelliJ IDEA作为...
本项目“javalin-thymeleaf-html-css-js”展示了如何在Thymeleaf模板中引入外部的JavaScript和CSS文件,以实现更丰富的页面样式和交互效果。 首先,我们需要理解Thymeleaf的基本工作原理。Thymeleaf允许我们在HTML...
6. **数据绑定**:Thymeleaf的强项之一是与Spring框架的无缝集成,可以方便地实现Model对象与HTML元素的数据绑定,简化了前端与后端的交互。 7. **模板继承**:通过使用`th:extends`指令,Thymeleaf允许创建模板...
本案例将详细讲解如何将SpringBoot与Thymeleaf进行整合,构建一个完整的Web应用。 首先,我们需要在SpringBoot项目中引入Thymeleaf的依赖。在`pom.xml`文件中,添加如下Maven依赖: ```xml <groupId>org.spring...
4.2.2 JavaScript和模板的结合:展示了如何将JavaScript代码嵌入模板中,以实现更丰富的页面交互。 4.2.3 样式和布局的高级应用:深入讨论了如何使用Thymeleaf实现复杂的页面样式和布局。 4.3 数据的URL处理 ...
总结来说,Spring Boot简化了后端开发,Bootstrap优化了前端用户体验,而Thymeleaf则让前后端数据的交互变得更加平滑。这种组合为开发高效、现代的企业级Web应用提供了强大支持。在"bootdemo"项目中,你可以学习到...
SpringBoot 2.7.15 与 Thymeleaf 的整合是现代Java Web开发中的常见实践,这个项目提供了一个基础的实现,包括了登录功能以及员工管理的相关操作。Thymeleaf是一款强大的服务器端模板引擎,常用于Spring Boot应用中...
Thymeleaf则是一个现代的服务器端JavaScript模板引擎,特别适合与Spring MVC集成,用于动态渲染HTML内容。 首先,让我们深入了解Spring Boot的核心特性。Spring Boot的主要优点是其自动配置功能,它能够根据项目中...
7. **JavaScript和Ajax集成**:Thymeleaf不仅限于服务器端,还可以与客户端脚本交互。`data-th-*`属性可以让JavaScript代码在页面加载后继续处理Thymeleaf表达式。 8. **Spring集成**:Thymeleaf与Spring的集成非常...
标题中的“springboot+thymeleaf+websocket”是一个典型的Java Web开发技术组合,用于构建交互性强、实时性好的Web应用。Spring Boot是Spring框架的一个轻量级版本,旨在简化新Spring应用的初始搭建以及开发过程。...
Thymeleaf是一种广泛应用于Java Web开发中的模板引擎,尤其在Spring Boot框架中,它作为视图解析器,为开发者提供了强大的动态HTML渲染能力。...通过深入学习和实践,Thymeleaf将成为构建动态、交互式前端的强大工具。
内容覆盖了从Spring Boot和Spring MVC基础,到Thymeleaf的深入应用,再到前端JavaScript框架(如jQuery、Bootstrap和Vue.js)的介绍,以及使用Spring Data操作数据库和应用Spring Cloud构建微服务。最后,通过案例将...
在本项目中,Thymeleaf负责渲染前端页面,与后台数据进行交互,提供用户友好的界面。 3. **MySQL**:MySQL是一个开源的关系型数据库管理系统,广泛应用于各种规模的Web应用中。本项目选用MySQL存储题目、答案、用户...
Thymeleaf是一种现代的...通过上述功能,Thymeleaf为开发者提供了强大而灵活的工具,简化了前端与后端的数据交互,提高了Web应用的开发效率。在实际项目中,熟练掌握这些功能能够更好地利用Thymeleaf进行高效开发。
Thymeleaf是一个强大的服务器端模板引擎,它可以与Ajax结合使用,提供动态更新页面的能力,而无需刷新整个页面。下面将详细介绍如何在Thymeleaf中实现Ajax请求URL的构造。 首先,理解基础概念: - **Thymeleaf**:...
13. **事件处理**:通过`th:onclick`、`th:onmouseover`等,Thymeleaf可以生成JavaScript事件处理代码,与前端交互。 14. **表单处理**:Thymeleaf简化了表单的渲染和验证,如`th:field`自动处理表单字段,`th:...
Thymeleaf在分布式系统中的应用广泛,可以用于构建RESTful API的返回模板,或者作为前后端分离架构中的一部分,与Java、Spring等技术栈结合,实现高效的数据展示和交互。由于其易用性和强大的功能,Thymeleaf正逐渐...
同时,Bootstrap的CSS和JS库可以用来美化界面,添加交互功能,如下拉菜单、按钮组、表单验证等。 在文件结构上,通常会有一个`src/main/resources/templates`目录存放Thymeleaf模板文件,每个模板对应一个或多个...