前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）

比如这个情况，当使用echart的时候：

如下图：

下面给出thymeleaf发送List给JavaScript

    //入学手续界面@GetMapping("/procedure")public String procedure(Model model){model.addAttribute("someInfo", cardInfoDao.getCardInfo());System.out.println(cardInfoDao.getCardInfo());return "student/procedure";}

这里把某个结构体传过去即可：

这个结构体有如下的数据：

    public CardInfo(Integer id, Integer value1, Integer value2, Integer value3, Integer value4, Integer value5, Integer value6) {this.id = id;this.intValueList = new ArrayList<Integer>();this.intValueList.add(value1);this.intValueList.add(value2);this.intValueList.add(value3);this.intValueList.add(value4);this.intValueList.add(value5);this.intValueList.add(value6);this.strValueList = new ArrayList<String>();this.strValueList.add("拿校服");this.strValueList.add("拿饭卡");this.strValueList.add("拿被子");this.strValueList.add("拿X1");this.strValueList.add("拿X2");this.strValueList.add("拿X3");}

此时前端代码这么写：

就可以获取数据了！

<script th:inline="javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//这里暂时这么写，有需要再换吧var value1 = [[${someInfo.intValueList.get(0)}]];var value2 = [[${someInfo.intValueList.get(1)}]];var value3 = [[${someInfo.intValueList.get(2)}]];var value4 = [[${someInfo.intValueList.get(3)}]];var value5 = [[${someInfo.intValueList.get(4)}]];var value6 = [[${someInfo.intValueList.get(5)}]];var strValue1 = [[${someInfo.strValueList.get(0)}]];var strValue2 = [[${someInfo.strValueList.get(1)}]];var strValue3 = [[${someInfo.strValueList.get(2)}]];var strValue4 = [[${someInfo.strValueList.get(3)}]];var strValue5 = [[${someInfo.strValueList.get(4)}]];var strValue6 = [[${someInfo.strValueList.get(5)}]];rValueList.get(5)}]];

这个是关键，可以得到模板引擎的支持！

前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）相关推荐

前端笔记-thymeleaf显示数据及隐藏数据
源码如下: <form id="loginFrom" name="loginFrom" method="post" th:action ...
前端笔记-thymeleaf获取及回显input标签type=date
这是前端回显的数据: 修改界面: 前端相关代码: <div class="form-group"><label>出生时间</label>< ...
前端笔记-thymeleaf获取及回显select数据(combox)
如下: 以及回显前端代码如下: <div class="form-group"><label>选课</label><select nam ...
fetch vue读取json文件_前端笔记——尝试理解并在JavaScript中使用Fetch()
介绍 Fetch()方法可以发出类似于XMLHttpRequest(XHR)的网络请求.Fetch API和XMLHttpRequest之间的主要区别(也称为XHR)是Fetch API使用Promi ...
前端笔记-thymeleaf获取及回显input标签type=time
前端效果如下: 设置的时候就是这样的前端代码如下: <div class="form-group"><label>开课时间</label>&l ...
前端笔记-thymeleaf获取及回显input标签type=radio
如下演示: 回显: 前端代码如下: <div class="form-group"><label>性别</label><br/>&l ...
web前端基础知识查漏补缺,JavaScript面试题,赶紧收藏
1介绍js的基本数据类型 js一共六种基本数据类型,分别是 undefined null boolean number string ,还有es6新增的symbol 和 es10新增的bigint. ...
linux内核网络协议栈--监控和调优：发送数据（三十）
译者序本文翻译自 2017 年的一篇英文博客 Monitoring and Tuning the Linux Networking Stack: Sending Data.如果能看懂英文,建议阅读原 ...
[译] Linux 网络栈监控和调优：发送数据（2017）
转载自:http://arthurchiao.art/blog/tuning-stack-tx-zh/ 点击阅读原文 Published at 2018-12-17 | Last Update 202 ...

前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）

前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）相关推荐

最新文章

热门文章