Thymeleaf在js代码中获取list数据并输出（spring框架前后端交互）

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>