반응형
반응형

JSTL fn:split 값 처리 방법


 처음에 c:set 으로 split 할 값과 구분자(기호) 등을 설정한다.


예) 02-123-4567 이란 값이 들어가면 split 처리가 되서


02 123 4567 이란 값이 나옴. 


그후 c:forEach 로 루핑을 돌면서 필요한 위치의 값을 찾아서 보여주게 된다.


예) split 처리될 값이 02-123-4567 이란 값이 들어가면 밑의 소스의 경우 결과가


123-4567 이라고 나온다.


<c:if test="${g.last}">-${telNum}</c:if> 이부분에 '-' 를 넣어줘서 그렇게 나옴


 c:forEach 의 varStatus가 있어야 위치값을 찾을 수 있고


찾고자하는 위치는 <c:if test="${g.count == 2}"> 이런식으로 찾을 수 있다.


 

1
2
3
4
5
6
7
8
9
10
11
<c:set var="tel" value="${fn:split(list.ylpgTel,'-')}" />
 
 
 
<c:forEach var="telNum" items="${tel}" varStatus="g">
 
     <c:if test="${g.count == 2}">${telNum}</c:if>
 
       <c:if test="${g.last}">-${telNum}</c:if>
 
</c:forEach> 
cs

 


간단하게 처리하는 법 ... ^^


${fn:split(list.ylpgTel,'-')[2]}  split 으로 나누어진 부분에서 필요한 부분을 배열의 순서값으로 찾아서 처리 함.  

1
  ${fn:split(list.ylpgTel,'-')[1]}-${fn:split(list.ylpgTel,'-')[2]} 
cs



fn:startsWith 사용법

startsWith 는 리턴값이 true false이므로 삼항연산자에서 쓸때 유용했다

비슷한방법으로 endsWith도 사용하면될것이다



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="<c:url value='${main.LINK}'/>"  class="${fn:startsWith(requestURI, main.MENU_POINT) ? 'active' : '' }">
    <i class="${main.ICON}"></i> ${main.MENU_NAME}
    <c:if test="${main.SUBMENU_CNT > 0}">                                             
        <!-- 서브 메뉴 존재 여부  -->
        <span class="fa arrow"></span>
    </c:if>
</a>
 
<a href="<c:url value='${main.LINK}'/>"  class="${fn:endsWith(requestURI, main.MENU_POINT) ? 'active' : '' }">
    <i class="${main.ICON}"></i> ${main.MENU_NAME}
    <c:if test="${main.SUBMENU_CNT > 0}">                                             
        <!-- 서브 메뉴 존재 여부  -->
        <span class="fa arrow"></span>
    </c:if>
</a>
cs



startsWith  : 비교문자열의 시작 값이 동일하게 존재하면  true 아니면 false

endsWith   : 비교문자열의 긑값이 동일하게 존재하면  true 아니면 false



jstl의 간단한 사용법~~


[Java] Tag라이브러리(JSTL) 사용하기

3 Comments

자꾸 까먹는 경향이 있어 기록용으로 저장해 둡니다. JSP에서 간단한 프로그램 로직을 구현하기 위해 JSTL을 사용하는데요 다양한 JSTL용 태그 라이브러리가 제공되지만 이 글에서는 플로우등을 조정하기 위한 core만을 보도록 하겠습니다.

1. JSTL을 사용하기 위한 라이브러리를 다운

[이곳] 에서 다운받을 수 있습니다. 현재 시점에서는 1.1.2가 최신버전이군요. 만약에 Gradle 기반 프로젝트에서 JSTL을 사용하고자 하신다면 다음을 추가하면 됩니다.

2. 라이브러리 추가

다운받은 파일을 열어보면 standard.jar 와 jstl.jar 두개의 파일이 존재합니다. 둘 모두를 개발중인 프로젝트에 추가합니다.

3. JSP 페이지의 맨 위에 taglib 정의 추가

프로젝트의 맨 위에 다음을 추가해 줍니다.

4. JSTL 문법을 사용 (몇가지 예시)

<c:forEach>를 사용한 특정 범위의 숫자값을 순환

위의 코드는 0부터 10까지 2씩 증가하는 순환문을 뜻합니다. 현재의 증가값은 변수 x에 저장됩니다. 결과는 다음과 같이 출력이 됩니다.
사용자 삽입 이미지
<c:forEach>태그를 이용한 Collection형 배열을 처리

forEach는 Collection, Map, Iterator, Enumeration, Array(Object/Primitive), 쉼표로 구분된 String, SQL쿼리 결과값(javax.servlet.jsp.jstl.sql.Result) 등의 순환을 지원합니다.

위의 모드는 블로그 글을 순환하며 출력하는 예시입니다. ${entryList}는 title, text를 멤버 변수로 갖는 특정 객체의 집합 배열입니다. 현재 순환중인 객체가 blogEntry에 저장되며 .을 사용하여 title과 text를 출력하는 예시입니다.

여기에 새롭게 현재 순환중의 상태를 확인할 수 있는 varStatus라는 값을 사용할 수 있습니다. 말을 길게 할 필요없이 코드로 보여드리겠습니다.

위에 추가된 ${status.count}에서는 현재 몇번째 순환중인지 값을 확인할 수 있습니다.
사용가능한 변수의 종류는 다음과 같습니다.

  • current : 현재 순환중인 아이템을 가져옵니다.
  • index : 현재 순환중인 아이템의 인덱스(0베이스)를 가져옵니다.
  • count : 현재 순환중인 아이템의 인덱스(1베이스)를 가져옵니다.
  • first : 현재 순환중인 아이템이 첫번째 아이템인지 여부를 확인합니다. (Boolean)
  • last : 현재 순환중인 아이템이 마지막 아이템인지 여부를 확인합니다. (Boolean)
  • begin : forEach에서 지정할 수 있는 begin값을 가져옵니다.
  • end : forEach에서 지정할 수 있는 end값을 가져옵니다.
  • step : forEach에서 지정할 수 있는 step값을 가져옵니다.

<c:if>를 사용한 조건문 활용

다음의 코드는 첫번째 아이템이 순환중일 경우 블로그글이 언제 작성되었는지 날짜를 출력하도록 수정된 코드입니다. test안에 Boolean형이 반환될 수 있는 어떤 수식을 사용해도 됩니다.

그런데 정말 희안하게도 위의 <c:if>에는 else가 존재하지 않습니다. 그래서 다음의 방법을 사용하곤 합니다.

<c:choose>를 사용한 다중 조건문 활용

다음의 예제는 pageContext라는 컨텍스트 객체에 접근하여 요청의 스킴을 읽어오는 예제입니다. HTTP로 접속했을때와 HTTPS를 통해 접속했을때 다른 메시지를 출력하는 예시입니다. 추가로 둘다 아닐경우 오류 메시지를 출력하도록 하였습니다.

<c:url>를 사용하여 주소 생성

JSTL에서는 <c:url>을 지원하는데요 이 태그는 현재의 서블릿 컨텍스트 이름을 자동으로 앞에 붙여주고 세션관리와 파라미터의 이름과 값의 인코딩을 자동으로 지원합니다. 기본적인 사용법은 다음과 같습니다.

간단하죠? 여기서 더 나아가 <c:param>을 사용하여 파라미터를 추가할 수 있습니다.

위의 코드로써 생성되는 URL은 기본적으로 서블릿컨텍스트가 붙게 되며 세션쿠키를 사용중이라면 추가적으로 파라미터들만 추가되며 다음의 모습을 가지게 됩니다.

/blog/content/search.jsp?keyword=foo+bar&month=02%2F2003

만약에 세션 쿠키가 존재하지 않는다면 다음과 같은 결과를 나타내게 됩니다. 마찬가지로 파라미터들은 URL 인코딩되어 출력됩니다.

/blog/content/search.jsp;jsessionid=233379C7CD2D0ED2E9F3963906DB4290
?keyword=foo+bar&month=02%2F2003

<c:import>를 사용하여 페이지 첨부하기

JSP에는 기본적으로 두가지 방법의 페이지 안에 다른 컨텐츠를 추가하는 방법이 존재합니다. include지시자와 <jsp:include> 액션이 있는데요. 하지만 둘 모두 같은 웹 어플리케이션 또는 서블릿 컨텍스트 안에있는 페이지만을 불어들일 수 있습니다. core라이브러리에 있는 <c:import> 액션은 좀더 일반적이고 강력한 기능을 가진 <jsp:include>로 볼 수 있습니다. 사용 문법은 <c:url>과 매우 배슷하며 심지어 <c:param>도 그대로 사용할 수 있습니다.

<c:import>에는 var와 scope 두가지 필수적이지 않은 속성이 존재하는데요. var의 경우에는 불러들인 페이지를 곧바로 출력하지 않고 String형 변수로 담아두기 위해 사용됩니다. scope는 이 변수의 스코프를 지정할 수 있습니다. 기본적으로 page로 되어있습니다.

<c:catch>로 예외처리 하기

길게 설명할 필요가 없을것 같네요. <c:import>는 ftp에도 접속이 가능합니다. 다음에 보여드릴 코드의 경우 만약에 해당 위치에 파일이 존재하지 않거나 네트워크의 문제로 페이지를 불러올 수 없는 상황이라면 예외가 발생할 것입니다. 예외가 발생할 경우 var에 예외가 저장됩니다. <c:if>를 통해 예외가 발생했는지 확인하는 예제입니다

<c:redirect>를 이용한 페이지 리다이렉트 하기

이 액션은 <jsp:forward> 액션과도 매우 흡사합니다. 하지만 이 기능의 경우에는 서버사이드에서 구현된 요청형태만을 포워딩 합니다. 이게 무슨 말이냐면 포워딩의 경우에는 사용자 입장에서 보면 페이지의 이동 없이 다른 페이지를 띄워줄 수 있지만 리다이렉트의 경우에는 브라우저에 의해 페이지의 이동이 일어나게 됩니다. 하지만 <c:redirect>액션이 좀 더 유연합니다. <jsp:forward>의 경우에는 현재 같은 서블릿 컨텍스트 내의 다른 페이지로만 이동 할 수 있기 때문입니다.

참고 : http://www.ibm.com/developerworks/java/library/j-jstl0318/


반응형

'IT > Jsp|JSTL' 카테고리의 다른 글

JSTL 과 Javascript 혼용 사용의 실제사례  (0) 2018.01.03
JSP 에서 LinkedList 받기  (0) 2018.01.02
Javascript 에서 JSTL 사용하기 와 주의사항  (2) 2018.01.02
반응형

원글 : https://okky.kr/article/432665


실무 개발중 Javascript 와 JSTL의 사용법을 헷갈려 해서 도움을 청하신분에게 답변을 해드렸습니다

잘못된 코드를 먼저 보겠습니다


-잘못된 코드1


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$.each(data.list, function(key, value){
       if( key == data.list.length-1)
         {
            var rankWeek = value.RANK_WEEK;
            var rankItem = value.RANK_ITEM;
 
            $("#RANK_WEEK").val(rankWeek);
            $("#RANK_ITEM").val(rankItem);
            
            str  =         
                "<tr style='background-color:#ffef96;'>"                 +  
                        "<th> 구분      </th>"                                         +
                        "<th> 세부분류   </th>"                                          +
                            "<c:forEach var='i' begin='1' end='4' step='1'>"     +
                                "<th>${i}주</th>"                                  +
                            "</c:forEach>"                                          +
                        "<th>총계</th>"                                              +
                        "<th>" + value.RANK_WEEK + "</th>"                        +
                        "</tr>"     ;
         }    
});
cs


여기서보면 $.each() 내부에서 <c:forEach> 를 사용하는 부분이 보입니다

개발을하다보면 당연히 혼동될수있는 부분입니다

이건 웹 의 동작방식을 알아야하는데


JAVA>JSTL>HTML>Javascript 


로 기본적으로 이렇게만 알아두시면 될거같습니다

이 작동시점을 알고 확인해보면

보여야할 부분이 Jquery 를 반복문의 시작으로 두고 JSTL을 이중반복문의 시작으로 두고있다

이부분을 확인하실수있습니다

작동순서를 1,2,3,4 순서대로의 숫자로 본다면

4(Jquery)를 먼저두고 2(JSTL)를 그다음에둬서

1,4,2,3 의 순서로 실행시키는거죠 


두번째 잘못된 코드를 확인해보겠습니다

-잘못된 코드2


1
2
3
4
5
6
7
8
9
+ 추가질문
 
input type hidden에 rankWeek 값을 저장하였습니다. 
 
<c:forEach end='4'> 대신 RANK_WEEK값을 넣어야하는데..;
다음과 작성 작성하니
"<c:forEach var='i' end='$('#RANK_WEEK').val()' >"
 
에러가 발생하네요......  어떻게 수정해야하나요... 초보라서 간단한 것도 응용이 잘 안되네요...
cs


이부분도 마찬가지로 Jquery 값 $('#RANK_WEEK').val() 을 사용한 동작 순서의 에러로 이해하시면되고

단정적으로 외워버리자면


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

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


이전에 혼용사용의 포스팅을 읽어보신분이라면 두번째 문장은 이해가 가실겁니다


-올바른 사용예제

1
2
3
4
5
6
7
8
<c:forEach items="${map_list.email}" var="item2">
    list.push("${item2}");
</c:forEach>
 
 
<c:forEach var="code" items="${loc_type}">
    if(retObj.LOC_TYPE == "${code.cd_id}")        loc_type="${code.cd_nm}";
</c:forEach>
cs


Javascript와 JSTL 을 혼재해서 사용할수있는 예제입니다 참고하시면 되겠습니다

두가지에 모두 사용될수있는 el태그를 적절히 활용하는것이 중요합니다 

el태그는 ${} 이런 형식의 서버데이터 태그를 말합니다


아래는 추가 정보를 가져왔습니다


출처:

http://defacto-standard.tistory.com/entry/java-jstl-html-javascript-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9-%EC%88%9C%EC%84%9C-JSTL%EA%B3%BC-EL-%EA%B0%99%EC%9D%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0



간혹 가다가 웹 페이지가 예상대로 돌아가지 않을 떄가 있다.


예를 들면, JQuery를 사용해서 태그를 숨겼는데 그대로 보이는 경우이다.


이는 페이지가 로드되면서 실행되는 순서가 다르기 때문이다.

<html>
    <head>
        <script src="jquery.js" type="text/javascript"></script>
        <script src="abc.js" type="text/javascript"></script>
        <link rel="stylesheets" type="text/css" href="abc.css"></link>
        <style>h2{font-wight:bold;}</style>
        <script>
            $(document).ready(function(){
                $("#img").attr("src", "kkk.png");
            });
        </script>
    </head>
 
    <body>
        <img id="img" src="abc.jpg" style="width:400px;height:300px;"/>
        <script src="kkk.js" type="text/javascript"></script>
    </body>
</html>

 

위와 같은 소스에서 실행 순서는 다음과 같다.


1. HTML 문서 다운로드

2. HTML 문서 파싱 시작

3. HTML 파싱이 3번 라인에 도달

4. jquery.js 가 다운로드 되고 파싱된다.

5. HTML 파싱이 4번 라인에 도달

6. abc.js가 다운로드되고 파싱되고 실행된다.

7. HTML 파싱이 5번 라인에 도달

8. abc.css가 다운로드 되고 파싱된다.

9. HTML 파싱이 6번 라인에 도달

10. <style>태그 내부 CSS 규칙이 파싱되고 정의된다.

11. HTML 파싱이 7번 라인에 도달

12. 내부 Javascript다 파싱되고 실행된다.

13. HTML 파싱이 15번 라인에 도달

14. abc.jpg가 다운로드 되고 보여진다.

15. HTML 파싱이 16번 라인에 도달

16. kkk.js가 다운로드 되고 파싱된 후 실행된다.

17. 페이지 로딩이 끝났으므로 kkk.png그림이 보인다.

18. 끝


* onload함수는 페이지 로딩이 끝나는 이후 바로 실행


* Java, JSLT, HTML, Javascript가 모두 섞여있을 경우, 보기 순서대로 실행된다.

이때, 먼저 실행되는 쪽에서 뒤쪽에서 실행되는 쪽의 값을 읽을 수 없다. 준비가 안됐기 때문.


* 하나의 jsp파일 내에 작성된 소스라 하더라도,

Scriptlet이나 jstl, el 등은 서버단에서 실행되며

Javascript는 브라우저에서 실행되기 때문에 두 언어 간 변수를 직접 주고받을 수 없다.


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

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>

 

*Expression Language

${식} 과 같은 방법으로 표현한다.

JSP의 스크립트 요소(스크립틀릿, 표현식, 선언부)를 제외한 나머지 부분에서 사용할 수 있다.


반응형

'IT > Jsp|JSTL' 카테고리의 다른 글

jstl split,startsWith,endsWith 사용법  (0) 2018.01.26
JSP 에서 LinkedList 받기  (0) 2018.01.02
Javascript 에서 JSTL 사용하기 와 주의사항  (2) 2018.01.02
반응형

기본적으로 JSTL은 자바 코드를 다루기에 적합한 커스텀 태그 라이브러리이고

Javascript는 웹 브라우저에서 사용되는 스크립트 프로그래밍 언어이고 

내장객체에도 접근이 가능하다는 장점이있다

웹개발을 하다보면 두가지를 같이 써야할상황도 있고 이부분에 헷갈려 하기 쉽다

일단은 두가지를 같이 사용할수있는 예제가 있어서 가져와보았다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// java
 
HashMap<Object, Object> map = new HashMap<Object, Object>();
 
map.put("name", "홍길동");
 
map.put("city", "서울");
 
map.put("age", 30);
 
 
 
ArrayList<Object> list = new ArrayList<Object>();
 
list.add("hong@naver.com");
 
list.add("gil@daum.net");
 
list.add("dong@nate.com");
 
 
 
ArrayList<HashMap<Object, Object>> arrayListMap = new ArrayList<HashMap<Object, Object>>();
 
arrayListMap.add(map);
 
 
 
HashMap<Object, ArrayList<Object>> lMultiData = new HashMap<Object, ArrayList<Object>>();
 
lMultiData.put("email", list);
 
 
 
mav.addObject("list_map", arrayListMap);
 
mav.addObject("map_list", lMultiData);
 
 
 
 
 
// javascript
 
var list1 = new Array();
 
<c:forEach items="${list_map}" var="item1">
 
list1.push("${item1.name}");
 
list1.push("${item1.city}");
 
list1.push("${item1.age}");
 
</c:forEach>
 
for (var i = 0; i < list1.length; i++) {
    alert(list1[i]);
}
alert("${list_map[0].name}");
 
var list2 = new Array();
<c:forEach items="${map_list.email}" var="item2">
 
list2.push("${item2}");
 
</c:forEach>
 
for (var i = 0; i < list2.length; i++) {
    alert(list2[i]);
}
cs


출처: http://blog.naver.com/PostView.nhn?blogId=typeofb&logNo=191469973


해당 방식으로 사용할수있는데

기본적으로 자바스크립트와 JSTL의 작동 순서를 알고 코딩해야 에러를 줄일수있다



서버가 작동할때

JAVA>JSTL>HTML>Javscript 


순서로 작동하기때문에 Javascript 에서는 Jstl나 el 태그의 값을 다루는데에 제한적일수밖에없다


1
2
3
4
5
6
7
8
9
10
<c:forEach items="$("#list").val()" var="item1">
 
list1.push("${item1.name}");
 
list1.push("${item1.city}");
 
list1.push("${item1.age}");
 
</c:forEach>
 
cs

(X)


이런식으로 Jquery 값을 jstl에서는 다룰수가없다 


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

(O)


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




다른 예제

출처: http://wfreud.tistory.com/51 [wfreud 개인 라이브러리]


XXXXcontroller.java 에서

다음과 같이 getUserInfo에 값을 담아 보냈을 때

 

1. getAttribute로 값 받기

이 방법은 비추…

해당 클래스를 매번 import해야되고, 나중에 소스 파악도 힘듦

 

 

2. el표현언어 or jstl 이용  

jstl 이용 시

Value에 <c:out ~~> " 태그를 이용해서 써주면 된다

 

 

 

3. [추가 20141008]자바스크립트에서 받고 싶다면????

뷰(jsp)페이지에서 jstl 태그 이용하지 않고

model에 담긴 List 를 자바스크립트에서 처리하고 싶다면????

 

하나의 jsp 파일 내에 작성된 소스라도

jstl,el 등은 서버에서 실행이되고, 자바스크립트는 브라우저에서 실행되기 때문에

두 언어 간에 변수를 직접 주고 받을 수는 없다

 직접은 아니더라도 받을 수는 있음!!!!



3. 자바스크립트 내에서 값 받기

1) jstl을 이용해서 받기

controller에서 List<ServerInfo>  형태로 값을 'serverinfo'에 담아 넘겨줬을 경우

 

 

여기서는 json 배열을 만들고자 했다

 

그래서,

jstl 구문으로 값을 받고 ->받은 값을 json Object에 넣고 -> 배열에 다시 넣음

그럼

[[a:xxx,b:sss],[a:xxx,b:sss],[a:xxx,b:sss]] 형태의 값이 된다.

 

 

여기서 object 선언을 jstl 바깥쪽에 넣으면 똑같은 값이 들어간다...

object는 하나의 객체이기 때문에!!!!!

추가될때마다 오브젝트를 만들어서 넣어주도록 해야함



2) javascript 배열을 이용해서 받기


Controller단에서 Model은 request 에 값을 가지고 있음..

model에 있는 값을 받을려면 페이지 전환되어야 그 값을 받아올 수 있음



ajax 요청 같은 경우 

페이지 전환없이 같은페이지에서 받는 것이기 때문에 


컨트롤러에서 model  값에 넣어서 넘겨주면 안돼고.. 

return 값에 넣어 다음과 같이 클라이언트 단에 넘겨줘야함 


받을때는 그냥 다음과 같이 받으면 됨


여기서 .. 리턴 타입이 List<Beacon> 라면...

자바의 List는 자바스크립트에서는 배열로 받음 

Beacon은 object로 접근이 가능하다 




반응형

'IT > Jsp|JSTL' 카테고리의 다른 글

jstl split,startsWith,endsWith 사용법  (0) 2018.01.26
JSTL 과 Javascript 혼용 사용의 실제사례  (0) 2018.01.03
JSP 에서 LinkedList 받기  (0) 2018.01.02
반응형
1

+ Recent posts

티스토리툴바