`

Thymeleaf与js交互

 
阅读更多

项目上用到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>

 

  得到的结果:



 

  • 大小: 43.1 KB
分享到:
评论

相关推荐

    springboot与thymeleaf结合的实战、实例项目

    此外,Thymeleaf还能与其他前端库如Bootstrap、jQuery等无缝协作,提供美观且交互丰富的界面。同时,Thymeleaf的模板在浏览器不执行任何JavaScript的情况下也能正常显示静态内容,提高了用户体验。 在"spring-boot-...

    Thymeleaf所需要的jar包

    Thymeleaf的强大之处在于它能够处理复杂的条件语句、循环结构、国际化以及与其他技术(如JavaScript、CSS)的集成,极大地简化了前端与后端的交互。 总的来说,Thymeleaf是Java Web开发中的一个重要组件,它的jar包...

    springboot与thymeleaf

    7. **数据库集成**:Spring Boot通过`spring-boot-starter-data-jpa`可以方便地与各种数据库进行交互,如MySQL、H2等。Thymeleaf可以用来动态生成表单和显示数据库中的数据。 8. **IDEA集成**:IntelliJ IDEA作为...

    javalin-thymeleaf-html-css-js:将Thymelaf与外部JS和CSS文件一起使用

    本项目“javalin-thymeleaf-html-css-js”展示了如何在Thymeleaf模板中引入外部的JavaScript和CSS文件,以实现更丰富的页面样式和交互效果。 首先,我们需要理解Thymeleaf的基本工作原理。Thymeleaf允许我们在HTML...

    Thymeleaf+Java Demo演示

    6. **数据绑定**:Thymeleaf的强项之一是与Spring框架的无缝集成,可以方便地实现Model对象与HTML元素的数据绑定,简化了前端与后端的交互。 7. **模板继承**:通过使用`th:extends`指令,Thymeleaf允许创建模板...

    springboot整合thymeleaf完整例子

    本案例将详细讲解如何将SpringBoot与Thymeleaf进行整合,构建一个完整的Web应用。 首先,我们需要在SpringBoot项目中引入Thymeleaf的依赖。在`pom.xml`文件中,添加如下Maven依赖: ```xml &lt;groupId&gt;org.spring...

    thymeleaf_3.0.5_中文参考手册

    4.2.2 JavaScript和模板的结合:展示了如何将JavaScript代码嵌入模板中,以实现更丰富的页面交互。 4.2.3 样式和布局的高级应用:深入讨论了如何使用Thymeleaf实现复杂的页面样式和布局。 4.3 数据的URL处理 ...

    spring boot+bootstrap+thymeleaf

    总结来说,Spring Boot简化了后端开发,Bootstrap优化了前端用户体验,而Thymeleaf则让前后端数据的交互变得更加平滑。这种组合为开发高效、现代的企业级Web应用提供了强大支持。在"bootdemo"项目中,你可以学习到...

    springboot2.7.15+thymeleaf 代码

    SpringBoot 2.7.15 与 Thymeleaf 的整合是现代Java Web开发中的常见实践,这个项目提供了一个基础的实现,包括了登录功能以及员工管理的相关操作。Thymeleaf是一款强大的服务器端模板引擎,常用于Spring Boot应用中...

    Spring boot thymeleaf 简单例子

    Thymeleaf则是一个现代的服务器端JavaScript模板引擎,特别适合与Spring MVC集成,用于动态渲染HTML内容。 首先,让我们深入了解Spring Boot的核心特性。Spring Boot的主要优点是其自动配置功能,它能够根据项目中...

    thymeleaf 最新中文文档

    7. **JavaScript和Ajax集成**:Thymeleaf不仅限于服务器端,还可以与客户端脚本交互。`data-th-*`属性可以让JavaScript代码在页面加载后继续处理Thymeleaf表达式。 8. **Spring集成**:Thymeleaf与Spring的集成非常...

    springboot+thymeleaf+websocket

    标题中的“springboot+thymeleaf+websocket”是一个典型的Java Web开发技术组合,用于构建交互性强、实时性好的Web应用。Spring Boot是Spring框架的一个轻量级版本,旨在简化新Spring应用的初始搭建以及开发过程。...

    Thymeleaf参考文档

    Thymeleaf是一种广泛应用于Java Web开发中的模板引擎,尤其在Spring Boot框架中,它作为视图解析器,为开发者提供了强大的动态HTML渲染能力。...通过深入学习和实践,Thymeleaf将成为构建动态、交互式前端的强大工具。

    《Spring Boot 2+Thymeleaf企业应用实战》_杨恩雄.pdf

    内容覆盖了从Spring Boot和Spring MVC基础,到Thymeleaf的深入应用,再到前端JavaScript框架(如jQuery、Bootstrap和Vue.js)的介绍,以及使用Spring Data操作数据库和应用Spring Cloud构建微服务。最后,通过案例将...

    Spring Boot + thymeleaf + mysql + security 在线答题系统

    在本项目中,Thymeleaf负责渲染前端页面,与后台数据进行交互,提供用户友好的界面。 3. **MySQL**:MySQL是一个开源的关系型数据库管理系统,广泛应用于各种规模的Web应用中。本项目选用MySQL存储题目、答案、用户...

    Thymeleaf常用功能.rar

    Thymeleaf是一种现代的...通过上述功能,Thymeleaf为开发者提供了强大而灵活的工具,简化了前端与后端的数据交互,提高了Web应用的开发效率。在实际项目中,熟练掌握这些功能能够更好地利用Thymeleaf进行高效开发。

    如何在Thymeleaf中实现ajax请求url的可靠构造

    Thymeleaf是一个强大的服务器端模板引擎,它可以与Ajax结合使用,提供动态更新页面的能力,而无需刷新整个页面。下面将详细介绍如何在Thymeleaf中实现Ajax请求URL的构造。 首先,理解基础概念: - **Thymeleaf**:...

    thymeleaf 3.0.5 中文文档.rar

    13. **事件处理**:通过`th:onclick`、`th:onmouseover`等,Thymeleaf可以生成JavaScript事件处理代码,与前端交互。 14. **表单处理**:Thymeleaf简化了表单的渲染和验证,如`th:field`自动处理表单字段,`th:...

    thymeleaf_3.0.5_中文手册PDF

    Thymeleaf在分布式系统中的应用广泛,可以用于构建RESTful API的返回模板,或者作为前后端分离架构中的一部分,与Java、Spring等技术栈结合,实现高效的数据展示和交互。由于其易用性和强大的功能,Thymeleaf正逐渐...

    spring boot+thymeleaf+bootstrap 简单实现后台管理系统界面

    同时,Bootstrap的CSS和JS库可以用来美化界面,添加交互功能,如下拉菜单、按钮组、表单验证等。 在文件结构上,通常会有一个`src/main/resources/templates`目录存放Thymeleaf模板文件,每个模板对应一个或多个...

Global site tag (gtag.js) - Google Analytics