오늘도 개발자 Backend Developer

thymeleaf에서 javascript로 데이터 전달 방법

  • spring controller에서 전달한 데이터를 javascript 변수로 담아 사용하고 싶다.

javascript로 데이터 전달 방법

controller 소스

  • testValue 를 javascript 변수로 담아보자.
@GetMapping("/")
public ModelAndView home(){
	ModelAndView mv = new ModelAndView("home");

	mv.addObject("testValue", "안녕하세요.");

	return mv;
}

javascript 소스

<html xmlns:th="http://www.thymeleaf.org">
<body>

<script  th:inline="javascript">
	/*<![CDATA[*/
	var testValue = "[[${serviceCode}]]";
        alert(testValue);
	/*]]>*/
</script>
</body>
</html>

Foreach 사용하는 법

<script th:inline="javascript">
	/*<![CDATA[*/

	/*[# th:each="tmp : ${list}"]*/
	noti(/*[[${tmp.testValue}]]*/, /*[[${tmp.tmpValue}]]*/);
	/*[/]*/

	/*]]>*/
	
	function noti(testValue, tmpValue){
		console.log(testValue, tmpValue);
	}
</script>