比如這個情況，當使用echart的時候：

如下圖：

下面給出thymeleaf發(fā)送List給JavaScript

//入學(xué)手續(xù)界面@GetMapping("/procedure")public String procedure(Model model){model.addAttribute("someInfo", cardInfoDao.getCardInfo());System.out.println(cardInfoDao.getCardInfo());return "student/procedure";}

這里把某個結(jié)構(gòu)體傳過去即可：

這個結(jié)構(gòu)體有如下的數(shù)據(jù)：

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");}

此時前端代碼這么寫：

就可以獲取數(shù)據(jù)了！

<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)}]];

<script th:inline="javascript">

這個是關(guān)鍵，可以得到模板引擎的支持！

總結(jié)

以上是生活随笔為你收集整理的前端笔记-thymeleaf发送数据给JavaScript变量（普通变量和List）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。