爱站程序员基地Thymeleaf在js代码中获取list数据并输出
举个例子：
控制器方法代码，这里是通过model中的一个addAttribute方法向前端（html界面）传送数据，然后在js中接收数据
- 一种方法是直接在js中获得后端传来的数据
- 还有一种方法是通过标签接收数据，可以用js中document.getElementsByName函数获取input输入框的值，前提是先把值传进input输入框中。下面介绍两个方法：
1、js中直接接收方法
@Controller@RequestMapping(\"/\")public class TestController {@RequestMapping(\"/test\")public String test(Model m) {List<Integer> ints = new ArrayList<Integer>();ints.add(3);ints.add(4);ints.add(5);ints.add(6);ints.add(7);m.addAttribute(\"priceList\", ints);return \"test\";}}
- 之后要在html或者js界面接收传入的值，这里在js中接收数据的方法如下
<script th:inline=\"javascript\">var info={data:[[# th:each=\"price : ${priceList}\"][[${price}]],[/]]}</script>
- 输出的页面源代码是，这时候就已经接收数据了
<script>var info={data:[3,4,5,6,7,]}</script>
2、document.getElementsByName方法接收
@首先你要在html中用标签接收，当然很多人可能会疑惑为什么不直接在js中接收，这里是由于js代码直接接收很繁琐，而且有时候在html中也会用到传过来的数据，传入数据还是上面那个方法，我这里介绍一下list数组的方法
这里的pricelist是一个字典数组类型的数据,是在数据库中查询出来的结果
[
[date:日期,price:价格],
[date:日期,price:价格]，
[date:日期,price:价格]
]
@RequestMapping(\"/MyEchars\")String MyEchars(Model m) throws SQLException{String sql=\"select date,price from item\";Connection conn=DBUtil.getConnection();PreparedStatement pstm=(PreparedStatement) conn.prepareStatement(sql);ResultSet rSet= pstm.executeQuery();ArrayList<Stock2> stock2=new ArrayList<Stock2>();while(rSet.next()) {Time date=rSet.getTime(\"date\");double price=rSet.getDouble(\"price\");Stock2 stock=new Stock2(date, price);stock2.add(stock);}System.out.println(stock2);m.addAttribute(\"pricelist\",stock2);return \"test/MyEchars\";
@在标签中接收，代码如下
<div th:each=\"price:${pricelist}\">id<input type=\"text\" name=\"date\" th:value=\"${price.date}\"/>股票价格<input type=\"text\" name=\"price\" th:value=\"${price.price}\"/></div>
@接着在js代码中接收，这里需要用到js中的document.getElementsByName方法，通过标签的name获得标签的值，代码如下
<script >//下面两个方法均可获取list值var data=[];var data2=[];var els =document.getElementsByName(\"price\");for (var i = 0, j = els.length; i < j; i++){data[i]=els[i].value; //获得值(els[i].id)，并存入数组; //获得ID }var els2 =document.getElementsByName(\"date\");for (var i = 0, j = els2.length; i < j; i++){data2[i]=els2[i].value; //获得值(els[i].date); //获得日期}</script>
