Javascript와 JSTL 혼용할 때 숙지해야할 것

기본적으로 서버가 작동할 때

JAVA > JSTL > HTML > Javascript 순서로 동작한다.

웹 개발을 하다보면 서버에서 넘어온 값을 view에 뿌려줄 때 Javascript와 jstl을 혼용해야 할 때가 많다.

 

 

<잘못 사용한 방법>

<c:forEach items="$("#list").val()" var="item1">
list1.push("${item1.name}");
list1.push("${item1.city}");
list1.push("${item1.age}");
</c:forEach>

 

jquery로 가져온 값을 jstl로 반복문을 돌리려는 건 실행순서상 에러가 발생한다.

 

 

<올바르게 사용한 방법>

var list = '<c:out value="${list}"/>';

다만 스크립트가 로드되기 전부터 존재하는 el값은 스크립트에서 조작이 가능하다.

 

간단하게 생각하면

- JSTL에선 Javascript값을 받을 수 없다

- Javascript에선 JSTL값을 받을 수 있다

 

 

** 추가 **

 

다음과 같은 방법으로 직접적으로 변수를 쓸 수 없다.

 

var list = new Array();
list = "${TestList}";

alert( list[0].name );

 

 

쓰려면 다음과 같이 해야한다.

var list = new Array();

<c:foreach items="${TestList}" var="item">
list.push("${item.name}");
</c:foreach>