thymeleaf的初次使用(带参请求以及调用带参js方法)
之前对于前端框架接触较少,第一次接触thymeleaf,虽说看起来并不复杂但我还是花费了好一会儿才弄懂。
话不多少下面就简单说一下我在项目中的应用。
首先是java代码 controller层 将需要在前端展示的信息放入model中:
@RequestMapping("getAll")public String getAll(Model model){List<ScheduleJob> list = scheduleJobService.getAllJob();model.addAttribute("list", list);return "sch/quartz/list";}
之后便是在前端html页面的遍历
1 <tr th:each="job:${list}"> 2 <td th:text="${job.name }">任务名</td> 3 <td th:text="${job.group }">任务组</td> 4 <td th:text="${job.status }">状态</td> 5 <td th:text='${job.cronExpression }'></td> 6 <td th:text="${job.className }">类名</td> 7 <td th:text="${job.description }">描述</td> 8 <td><a href="#" th:href="@{/quartz/pause(name=${job.name},group=${job.group})}">暂停</a></td> 9 <td><a href="#" th:href="@{/quartz/resume(name=${job.name},group=${job.group})}">恢复</a></td> 10 <td><a href="#" th:href="@{/quartz/run(name=${job.name},group=${job.group})}">执行一次</a></td> 11 <td><a href="#" th:href="@{/quartz/delete(name=${job.name},group=${job.group})}">删除</a></td> 12 <td><button id="edit" th:name="${job.name}" th:id="${job.group}" onclick="test(this)">修改cron表达式</button></td> 13 </tr>
这里直接在<tr>标签中 用 th:each 放入需要遍历的内容,以及定义变量名;在<td>标签中用th:text来展示内容。
在<a>标签中用 普通的href不能实现带参的接口请求,所以需要使用 th:href 的这种语法来实现带参的接口请求,参数用()跟在后面就可以。
至于调用js的带参方法就需要用12行那种办法 将参数作为 th 标签的name或者id传入方法中,具体的js方法如下;
1 function test(obj){ 2 var cron = $("#cron").val(); 3 var name = $(obj).attr("name"); 4 var group = $(obj).attr("id"); 5 $.post("edit",{"name":name,"group":group,"cron":cron},function(){ 6 alert("更新成功!!!"); 7 window.location.reload(); 8 }); 9 }
这样就能实现js带参方法的调用,目前来说我所知道的可以实现的就是这种方式。
补充一点,前端遍历的实体类需要重写toString方法,并且必须是如下格式的:
1 @Override 2 public String toString() { 3 StringBuilder builder = new StringBuilder(); 4 builder.append("{name:\""); 5 builder.append(name); 6 builder.append("\", group:\""); 7 builder.append(group); 8 builder.append("\", cronExpression:\""); 9 builder.append(cronExpression); 10 builder.append("\", status:\""); 11 builder.append(status); 12 builder.append("\", description:\""); 13 builder.append(description); 14 builder.append("\", className:\""); 15 builder.append(className); 16 builder.append("\"}"); 17 return builder.toString(); 18 }
这样才能在页面上成功遍历。
对于thymeleaf,目前我也就掌握了这些简单的使用。
转载于:https://www.cnblogs.com/stan-tiger/p/5622824.html
thymeleaf的初次使用(带参请求以及调用带参js方法)相关推荐
- java怎么无参构造方法_Java中如何在无参构造方法中调用有参构造?
展开全部 一般正常的都是参数多的调用参数少的.有参数的调用无参数的居e68a843231313335323631343130323136353331333365643537多. 当然你要无参调用的参的 ...
- vue bus传值(带参数),调用组件之间的方法
1.不带参数的调用 创建的时候绑定created () {this.getLeftF();this.$bus.on('getLeftF', this.getLeftF);},销毁beforeDestr ...
- java无参_Java中无参无返回和无参带返回的类型方法
在前面的文章中,我们学习了java中方法的定义.分类及调用的相关知识.知道了java中的方法其实可以叫做函数,目的是实现某些我们想要的功能,也知道了java中方法的分类共有四种:无参无返回.无参带返回 ...
- python爬虫基础Ⅱ——Ajax数据爬取、带参请求:QQ音乐歌单、QQ音乐评论
文章目录 基础爬虫部分Ⅱ Ajax技术 json 1. Network 2. XHR怎么请求? 3. 什么是json? 4. json数据如何解析? 带参数请求 1. 复习 2. params 3. ...
- vue前端实现从数据库获取数据的下拉框以及带参请求
一.下拉框的实现 <el-form-item><el-select @change="getOptions" v-model="type" p ...
- 爬虫精进(四) ------ 带参请求/伪装成真实浏览器
一.通过Query String Parametres查看参数 请你使用浏览器打开QQ音乐官网,搜索周杰伦.然后打开检查面板里的Network,刷新这个页面.当然,你也可以点击这个链接直达: http ...
- SpringMVC自动将请求参数和入参对象的属性进行一一绑定;要求请求参数的名字和javaBean入参的对象里面的属性名是一样的||员工的增删改查案例
SpringMVC自动将请求参数和入参对象的属性进行一一绑定:要求请求参数的名字和javaBean入参的对象里面的属性名是一样的 1.SpringMVC中配置HiddenHttpMethodFilte ...
- python get方法请求参数_python中requests库get方法带参数请求
起因是想爬五等分的花嫁的漫画.这是其中的一个坑 先上代码 data={'cid':567464,'page':1,'key':'','language':1,'gtk':6,'_cid':567464 ...
- python调用带参函数_Python | 带有示例的函数调用类型
python调用带参函数 There are following types of function calls in python: python中有以下类型的函数调用: Call by value ...
最新文章
- Python 快速生成 web 动态展示机器学习项目!
- 你真的懂用户画像吗?
- html之file标签 --- 图片上传前预览 -- FileReader
- 好代码是管出来的——使用GitHub实现简单的CI/CD
- 7-1 ATM机类结构设计(一) (100 分)
- 【文献阅读】Stacked What-Where Auto-encoders -ICLR-2016
- 英特尔开源计算机视觉数据标签工具CVAT,加速数据注释
- Java之品优购课程讲义_day12(6)
- 小米路由r1c 刷番茄_充分利用番茄路由器的5条提示
- 三角函数π/2转化_浅谈三角函数导数综合题(1)
- COLING 2018 accepted paper
- 我的python中级班学习之路(全程笔记第一模块) (第二章)(第3部分:元祖、哈希(hash)、字典、集合...
- WinRAR制作单文件(便携版)
- 树莓派raspi-config配置工具
- matlab计算纹波电压,如何估算开关电源纹波电压?
- android读取assets下的.json文件,并且转化为实体类
- 个人建站赚钱的5种常见方法
- 【思维导图】Excel转成思维导图
- zzlibsvm / liblinear中的交叉训练技巧
- Android之WiFi连接检测
热门文章
- springBoot整合rabbitmq并测试五种常用模型
- 天国近了(一) -- 揭穿OOP神话
- 失物招领小程序_在机场丢了东西怎么办?温州机场失物招领在线办理平台暖心上线!...
- “小程序”的最佳入口位置--关于微信小程序的思考笔记
- GDAL读取S-57海图数据中文属性值乱码问题解决
- GDAL源码剖析(七)之GDAL RasterIO使用说明
- java kdj_基于Java语言开发的个性化股票分析技术随机指数[KDJ].doc
- 开源GIS(十一)——openlayers中加载离线标准与自定义切片(深度好文)
- ASP.NET MVC——Entity Framework连接mysql及问题
- 关于 Openresty 的两三事