项目上用到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作为...
这些表达式可以与后端的Java对象交互,填充数据到模板中,实现页面的动态渲染。 在Java工程中,我们首先需要添加Thymeleaf的依赖。如果你使用的是Maven,可以在pom.xml文件中加入以下依赖: ```xml <groupId>org....
本项目“javalin-thymeleaf-html-css-js”展示了如何在Thymeleaf模板中引入外部的JavaScript和CSS文件,以实现更丰富的页面样式和交互效果。 首先,我们需要理解Thymeleaf的基本工作原理。Thymeleaf允许我们在HTML...
本案例将详细讲解如何将SpringBoot与Thymeleaf进行整合,构建一个完整的Web应用。 首先,我们需要在SpringBoot项目中引入Thymeleaf的依赖。在`pom.xml`文件中,添加如下Maven依赖: ```xml <groupId>org.spring...
HTML是一种标记语言,主要用于创建网页和网络应用,而模板...开发者可以参考本项目中的源码,快速搭建起自己的动态网页和应用程序,同时也可以进一步学习和掌握Thymeleaf模板引擎的使用,以及前端与后端的交互逻辑。
6. **数据绑定**:Thymeleaf的强项之一是与Spring框架的无缝集成,可以方便地实现Model对象与HTML元素的数据绑定,简化了前端与后端的交互。 7. **模板继承**:通过使用`th:extends`指令,Thymeleaf允许创建模板...
本文档是一个包含了Spring、Java、Thymeleaf、JavaScript等技术教程的压缩包资源,适合于计算机科学与技术领域的学习和研究。资源内容丰富,不仅包括了详细的教程项目源码,还经过了严格测试以确保其正常运行。此外...
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模板引擎和Ajax异步通信技术,这两者的结合使系统在数据展示和用户交互方面表现出色。Thymeleaf作为一个服务器端的模板引擎,使得在Java应用程序中可以方便地管理HTML内容,而Ajax技术则...
Thymeleaf是一种现代的...通过上述功能,Thymeleaf为开发者提供了强大而灵活的工具,简化了前端与后端的数据交互,提高了Web应用的开发效率。在实际项目中,熟练掌握这些功能能够更好地利用Thymeleaf进行高效开发。