[JavaScript] Controller에서 넘긴 Model 값 JavaScript에서 사용하기

Controller에서 select 한 값이라거나 map, list 등을 Model에 담아서 값을 보내줄 수 있다.

model.addAttribute("params", paramsMap);

이런식으로..

저 값들을 View(jsp)단에서는 

<!-- val : map에 담은 변수(컬럼)명 -->
<input type="text" name="name" value="${params.val}">
<!-- 또는 -->
<input type="text" name="name" value="<c:out value="${params.val}"/>">

요런식으로 쓰면 된다. 하지만 JavaScript 단에서 Model값을 불러와야 한다면?

같은 jsp 소스 내에 위치하고 있다고 하더라도 jstl,el 은 서버단에서 동작하고 JavaScript는 브라우저에서 실행된다. 그렇기 때문에 두 언어 간에 변수를 주고받을 수 없다.

불러오는 데이터가 1건밖에 없다면 JavaScript에서 var value = "${params.val}"; 이런식으로 해서 이미 불러왔을 것이다. 하지만 list, map 형식으로 model에 담겨와 여러 row가 존재하고 key값도 여러개라면 참 난처해진다.

처음부터 json을 사용하여 화면 이동 없이 현재 화면에서 값을 불러온다면 좋을텐데 그러지 못하는 경우도 있기마련..다른 화면으로 이동하면서 뿌려줘야할 경우도 있다.(이 글을 쓰기 전의 내가 그랬다ㅎㅎ)

이럴때 쓰는 방법을 적어보겠다. 추가적으로 다른 방법이나 더 좋은 방법을 공부하게 될 시 이글을 업데이트 하겠다.

/* JavaScript 내에서 jstl을 사용할 수 있다. jstl 선언해주는 것 잊지말기! */
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

/* JavaScript 태그 및 함수 등등 생략하고 필요한 부분에서 forEach 사용하기 */
<c:forEach items="${params}" var="item">
	alert("${item.val}");	// 위에 list나 변수를 선언하고 alert 자리에 담으면 차례대로 값을 받는다.
</c:forEach>

내가 써본 첫번째 방법은 JavaScript에서 jstl을 사용하여 변수에 담는 방법이다. forEach로 루프를 돌려서 차례대로 list나 object, 또는 변수에 담아서 알맞게 사용하면된다.

 

구글에 검색해보면 이 방법 말고도 있는거 같은데 아직 이해가 안가서 실제로 내가 써본 방법을 적어본다. 나중에 이해되면 그때 추가로 적어야지 :)

 

※ 열심히 공부해 나가는 과정이며 제가 참고하기 위해 만든 스토리이기 때문에 틀린 부분이 있을 수도 있습니다. 만약 틀린 부분이 있다면 댓글 부탁드립니다.