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>