SpringBoot项目中使用模板引擎thymeleaf动态传参

本文总结了在Thymeleaf模板引擎中如何处理动态传参,包括th:onclick、th:id、th:text、th:src和th:action等属性的用法,展示了如何将变量插入到事件绑定、属性值和URL路径中,以便在前端实现动态内容展示。

项目中使用模板引擎thymeleaf,遇到动态传参问题,使用th:attr来设置属性的值,现进行汇总,有问题及时讨论:

一、事件绑定JS且带参数
1、th:onclick示例:

th:onclick="'doSendMsg("'+${userInfo.mobile}+'")'" 
th:onclick="'javascript:doSendMsg(\''+${userInfo.mobile}+'\',\''+${userInfo.name}+'\')'"

二、属性动态传参
用“+”符号,也可以用“|”符号
1、th:id示例:

th:id="'my'+${userInfo.name}"

2、th:text示例:

th:text="'早上好,'+${userInfo.name}"
th:text="|早上好, ${userInfo.name}|"

3、th:src示例:

<img th:src="@{/img/research/{filename}(filename=${research.filename})}">

 4、th:action示例:

<form th:action="@{'/userAction/'+${userInfo.uid}}"></form>
<form th:action="@{/userAction/{uid}(uid=${userInfo.uid})}"></form>

5、th:href示例:

<a th:href="@{'https://'+${url.urlAddr}}" th:text="${url.urlName}"></a> 


 

 

 

### Spring Boot 前端传参方法 在Spring Boot项目中,从前端向后端传递参数有多种方式,具体取决于应用场景和技术栈的选择。 #### 使用表单提交(`application/x-www-form-urlencoded`) 当使用传统的HTML表单提交时,默认情况下浏览器会以`application/x-www-form-urlencoded`的形式发送请求。此时,在控制器的方法签名处可以利用@RequestParam注解来接收简单的查询字符串或表单项[^4]: ```java @PostMapping("/submitForm") public String submitForm(@RequestParam("name") String name, Model model){ // 处理逻辑... } ``` 对于复杂的数据结构,则可以通过创建Java Bean作为入参对象,并通过默认的属性编辑机制完成映射[^1]。 #### JSON格式数据交互 (`application/json`) 现代Web应用更倾向于RESTful风格API的设计模式下工作,这时通常会选择JSON作为消息体交换媒介。为了使Controller能够解析来自客户端发来的JSON串并将其反序列化为目标POJO实例,需借助于Jackson库以及`@RequestBody`标注: ```java @PostMapping(value="/api/register", consumes="application/json") @ResponseBody public ResponseEntity<String> registerUser(@RequestBody User user){ userService.save(user); return new ResponseEntity<>("success", HttpStatus.CREATED); } ``` 上述代码片段展示了如何定义一个接受POST请求的服务接口,该服务期望接收到的是遵循特定schema约束条件下的用户注册信息;一旦成功保存新记录至数据库之后便会响应给调用方一条HTTP状态码为201 Created的消息表示操作已完成。 #### AJAX异步通信 除了同步加载整个页面之外,还可以运用JavaScript中的XMLHttpRequest对象发起非阻塞式的网络请求实现局部更新的效果而不必刷新整个网页。这不仅提升了用户体验同时也降低了服务器负载压力。例如,结合jQuery插件简化AJAX编程模型如下所示[^3]: ```javascript $.ajax({ url: '/someUrl', type: 'GET', data: {paramName : paramValue}, success:function(result){ $('#result').html(result); } }); ``` 此段脚本演示了怎样构建一个GET类型的荷载携带指定键值对集合并通过回调函数处理返回的结果集最终动态修改DOM节点的内容展示出来。 #### Thymeleaf模板引擎集成 如果希望进一步增强前后端协作紧密度的话,不妨考虑引入Thymeleaf这样的服务器端模板解决方案。它允许开发者编写富含表达式语法特性的静态资源文件(.html),待运行期再由框架负责填充实际数值从而生成完整的超文本标记语言文档供浏览器解释执行。相较于原始的JSP/Servlet而言具备更好的可读性和维护性的同时也支持部分场景下的无刷新体验优化措施——即所谓的“伪Ajax”特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值