Lee's Grow up

[Javascript/JSTL] javascript안에 JSTL 사용 javascript에서 JSTL LIST 받아오기 / 배열 값 받기 본문

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
<script language=JavaScript src="${common_context_path_url}/TEST.JS"></script>

이때 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">        
            arr.push({name: "${item.name}"
                    , 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에서 값을 사용 할 수 있다

 

 

반응형

'Web > JavaScript&Jquery' 카테고리의 다른 글

[Javascript] 자바스크립트를 사용하여 Image File Base64 Encodig 방법 / 이미지 등록 방법  (2) 2019.10.24
[JavaScript] JavaScript/자바스크립트로 파일 읽어오기 / 로컬 파일 접근  (0) 2019.10.21
[Javascript/Jquery] TABLE 행 추가, 삭제, 체크된 table row 삭제 방법  (0) 2019.10.14
'Web/JavaScript&Jquery' Related Articles more
Comments