Web/JavaScript&Jquery
[Javascript/JSTL] javascript안에 JSTL 사용 javascript에서 JSTL LIST 받아오기 / 배열 값 받기
효기로그
2019. 10. 14. 13:31
반응형
JSTL과 javasscript를 같이 사용할 경우 서로 값을 주고 받고 싶은 경우가 생긴다.
그럴 경우 어떻게 써야 하는지 자꾸 헷갈려서 포스팅을 남깁니다.
시작하기에 앞서 서버가 동작하는 순서를 기억해둬야 할 필요가 있습니다.
| JAVA -> JSTL -> HTML -> Javascript |
1. 사용방법 및 예제
위에 적힌 방식대로 동작하기 때문에 JSTL의 EL 에서는 Javascript의 접근이 불가
|
1
2
3
4
5
6
7
|
<html>
<body>
<c:forEach items="$('lset')" var ='item' >
--logic
</c:forEach>
</body>
</html>
|
( 사용 불가능 X )
BUT Javascript에서는 JSTL의 EL이 사용 가능
|
1
2
3
4
5
|
<script language="javaScript">
<c:forEach items="${list}" var="item">
--logic--
</c:forEach>
</script>
|
( 사용 가능 O )
결과처럼 jstl에서는 javascript가 초기화 되기 전이기 때문에 jquery를 통해서 해당 javascript의 변수
접근이 불가능하나 javascript에서는 jstl이 실행 되고 난 후 초기화를 진행하기 때문에 접근이 가능하다.
위 처럼 페이지가 로드되는 순서를 기억하면 언제 사용이 가능하고 불가능한지 기억할 것
2. Javascript에서 JSTL 값 사용하기
필자의 경우 JSP와 JAVASCRIPT를 분리해서 소스를 작성하였다.
| JSP ( JS 선언 ) - SAMPLE.JSP | <- | JAVASCRIPT - TEST.JS |
|
1
|
|
이때 TEST.JS에서 SAMPLE.JSP로 서버에서 넘어온 값을 사용하기 위한 방법이다.
- 단일 변수 값 넣기
sample.jsp에서 변수를 선언
|
1
2
3
4
5
6
7
8
9
|
<script language=JavaScript>
// 방법 1
var data = '<c:out value="${dataName}"/>';
// 방법 2
var data2 = ${dataName};
</script>
|
test.js 에서 변수 사용
|
1
2
3
4
5
|
<script language=JavaScript>
console.log(data);
</script>
|
- 배열 저장 하기
sample.jsp 에서 배열을 선언 후 push를 통해 배열에 값 을 저장
|
1
2
3
4
5
6
7
8
9
10
|
<script language=JavaScript>
var arr = new Array();
<c:forEach items="${dataList}" var="item">
, age : "${item.age}"
,birth : "${item.birth}"});
</c:forEach>
</script>
|
test.js에서 사용
|
1
2
3
4
5
6
7
8
|
<script language=JavaScript>
for(var i= 0 ; y < arr.length; i ++){
alert("이름 : " + arr[i].name
+ " 나이 : " +arr[i].age + "입니다.");
}
</script>
|
위와 같이 배열일 경우 javascript를 통해 배열을 선언해 jstl을 통해 넘어온 값들로
배열을 초기화 후 test.js에서 값을 사용 할 수 있다
반응형