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,目前我也就掌握了这些简单的使用。

posted on 2016-06-28 11:28 tiger_张小虎 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/stan-tiger/p/5622824.html

thymeleaf的初次使用(带参请求以及调用带参js方法)相关推荐

  1. java怎么无参构造方法_Java中如何在无参构造方法中调用有参构造?

    展开全部 一般正常的都是参数多的调用参数少的.有参数的调用无参数的居e68a843231313335323631343130323136353331333365643537多. 当然你要无参调用的参的 ...

  2. vue bus传值(带参数),调用组件之间的方法

    1.不带参数的调用 创建的时候绑定created () {this.getLeftF();this.$bus.on('getLeftF', this.getLeftF);},销毁beforeDestr ...

  3. java无参_Java中无参无返回和无参带返回的类型方法

    在前面的文章中,我们学习了java中方法的定义.分类及调用的相关知识.知道了java中的方法其实可以叫做函数,目的是实现某些我们想要的功能,也知道了java中方法的分类共有四种:无参无返回.无参带返回 ...

  4. python爬虫基础Ⅱ——Ajax数据爬取、带参请求:QQ音乐歌单、QQ音乐评论

    文章目录 基础爬虫部分Ⅱ Ajax技术 json 1. Network 2. XHR怎么请求? 3. 什么是json? 4. json数据如何解析? 带参数请求 1. 复习 2. params 3. ...

  5. vue前端实现从数据库获取数据的下拉框以及带参请求

    一.下拉框的实现 <el-form-item><el-select @change="getOptions" v-model="type" p ...

  6. 爬虫精进(四) ------ 带参请求/伪装成真实浏览器

    一.通过Query String Parametres查看参数 请你使用浏览器打开QQ音乐官网,搜索周杰伦.然后打开检查面板里的Network,刷新这个页面.当然,你也可以点击这个链接直达: http ...

  7. SpringMVC自动将请求参数和入参对象的属性进行一一绑定;要求请求参数的名字和javaBean入参的对象里面的属性名是一样的||员工的增删改查案例

    SpringMVC自动将请求参数和入参对象的属性进行一一绑定:要求请求参数的名字和javaBean入参的对象里面的属性名是一样的 1.SpringMVC中配置HiddenHttpMethodFilte ...

  8. python get方法请求参数_python中requests库get方法带参数请求

    起因是想爬五等分的花嫁的漫画.这是其中的一个坑 先上代码 data={'cid':567464,'page':1,'key':'','language':1,'gtk':6,'_cid':567464 ...

  9. python调用带参函数_Python | 带有示例的函数调用类型

    python调用带参函数 There are following types of function calls in python: python中有以下类型的函数调用: Call by value ...

最新文章

  1. Python 快速生成 web 动态展示机器学习项目!
  2. 你真的懂用户画像吗?
  3. html之file标签 --- 图片上传前预览 -- FileReader
  4. 好代码是管出来的——使用GitHub实现简单的CI/CD
  5. 7-1 ATM机类结构设计(一) (100 分)
  6. 【文献阅读】Stacked What-Where Auto-encoders -ICLR-2016
  7. 英特尔开源计算机视觉数据标签工具CVAT,加速数据注释
  8. Java之品优购课程讲义_day12(6)
  9. 小米路由r1c 刷番茄_充分利用番茄路由器的5条提示
  10. 三角函数π/2转化_浅谈三角函数导数综合题(1)
  11. COLING 2018 accepted paper
  12. 我的python中级班学习之路(全程笔记第一模块) (第二章)(第3部分:元祖、哈希(hash)、字典、集合...
  13. WinRAR制作单文件(便携版)
  14. 树莓派raspi-config配置工具
  15. matlab计算纹波电压,如何估算开关电源纹波电压?
  16. android读取assets下的.json文件,并且转化为实体类
  17. 个人建站赚钱的5种常见方法
  18. 【思维导图】Excel转成思维导图
  19. zzlibsvm / liblinear中的交叉训练技巧
  20. Android之WiFi连接检测

热门文章

  1. springBoot整合rabbitmq并测试五种常用模型
  2. 天国近了(一) -- 揭穿OOP神话
  3. 失物招领小程序_在机场丢了东西怎么办?温州机场失物招领在线办理平台暖心上线!...
  4. “小程序”的最佳入口位置--关于微信小程序的思考笔记
  5. GDAL读取S-57海图数据中文属性值乱码问题解决
  6. GDAL源码剖析(七)之GDAL RasterIO使用说明
  7. java kdj_基于Java语言开发的个性化股票分析技术随机指数[KDJ].doc
  8. 开源GIS(十一)——openlayers中加载离线标准与自定义切片(深度好文)
  9. ASP.NET MVC——Entity Framework连接mysql及问题
  10. 关于 Openresty 的两三事