개발하다보면 해당 페이지의 table의 데이터들을 새로고침 없이 데이터를 붙여쓰는 경우들이 있다. 이는 대부분 리스트로 구성된 페이지에서 확인이 가능한데, 가령 오픈마켓의 주문배송리스트라거나, 뭐 카드사용 내역과 같은 페이지에서 주를 이룬다.

div태그를 쓰던 table태그를 쓰던 아마 과정은 비슷할 것이고, javascript에서 데이터와 html태그들을 어떻게 만들어서 jsp에 붙여주는지에 대한 예제를 작성해보고자 한다.


먼저 JSP에서는 다음과 같이 구성한다. 기본적으로 페이지가 로딩될 때, controller 단에서 modelAndView에서 데이터를 호출, List로 이루어진 객체들을 foreach 로 계속 붙여주는 구조로 되어있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!--결과 리스트-->
<div class="result-area">
  <h2 class="result-tit">거래결과 리스트</h2>
  <ul class="result-list" id="resultList">
      <c:forEach var="resultHistory" items="${resultHistory}" >
      <li class="result-item">
          <p class="result-day">${resultHistory.REG_DATE} <span>${resultHistory.ORDER_TYPE}</span></p>
          <dl class="result-detail">
              <dt>품명</dt>
              <dd>${resultHistory.PRODUCT_TYPE}</dd>
              <dt>금액</dt>
              <dd>${resultHistory.AMOUNT}</dd>
          </dl>
      </li>
      </c:forEach>
  </ul>
</div>
<div class="more-btn-wrap">
  <button type="button" id="btnResultMore">더보기</button>
</div>
cs


modelAndView 에서는 resultHistory라는 네이밍의 List 객체에 데이터들을 담아준다. 그리고 해당 jsp페이지가 호출되면, foreach로 객체들을 돌리면서(?) 각 항목들을 구성하게 된다. 이 때, btnResultMore를 클릭한다고 하자. 그럴 때 해당 페이지를 새로고침 없이, 리스트의 하단에 추가적으로 데이터가 붙는 방식이면 훨씬 보기가 좋을 것이다. 새로고침을 하게 되면 현재 입력되어있는 값들도 저장하지 않는 이상 사라질 것이고, 무엇보다 좀 더 자연스러운 화면을 뿌려줄 수 있을 것이다.


btnResultMore 버튼에 매핑되어있는 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
var pageNo = 0;
 
//결과 더보기
$("#btnResultMore").on("click"function () {
  $.ajax({
    type:'GET',
    url : '/resultMore.json',
    global : false,
    async : true,
    data : {
      pageNo: pageNo
    },
    success : function(json) {
      $('#resultList').empty();
 
      var html = '';
      pageNo = pageNo+1;
      json.resultList.forEach(function(item, index){
        html = $('<li class="result-item">' +
          '<p class="result-day">'+item.REG_DATE+' <span>'+item.ORDER_TYPE+'</span></p>' +
          '<dl class="result-detail">' +
          '<dt>품명</dt>' +
          '<dd>'+item.PRODUCT_TYPE+'</dd>' +
          '<dt>금액</dt>' +
          '<dd>'+item.AMOUNT+'</dd>');
        $('#resultList').append(html);
      });
    },error:function(json){
 
    }
  });
});
cs


자바스크립트에서는 ajax 호출을 통해, 데이터를 더 가져오기 위한 controller 와 매핑을 시켰다.

정상적으로 쿼리가 이루어지는 경우에는 success flag를 탈 것이고, 이 때부터 로직이 시작된다.


기본적으로 들어있는 row를 날리기 위해, 14번 라인에서는 resultList의 자식들을 모두 비워준다.

그리고 18번 라인에서 가져온 데이터를 기반으로 forEach를 돌리면서, HTML tag를 새로 만들어주는 방식으로 이루어져있다.

위의 jsp와 마찬가지로 같은 구성으로 html과 데이터를 매핑해준 후에, 26번 라인에서 append를 시켜주면 끝.


추가적으로 btnResultMore를 누르게 되면 5개씩 항목을 더 붙여주는 기능을 포함한 것인데, pageNo 변수를 추가하여 이를 쿼리에 응용했다.

기본값은 0으로 처리가 되어서 쿼리에서는 기본 5개, 1일 경우에는 10개를 가져오는 방향으로.


javascript 에서 append와 appendTo의 쓰임새가 확연히 다르다.

$('#a').append(b); 의 경우에는 a에 b를 넣는 것이고, $('#a').appendTo(b);는 b를 a에 넣는것이다.

블로그 이미지

김생선

세상의 모든것을 어장관리

댓글을 달아 주세요

DB에서 데이터를 가져온 후, TextArea에 value 값을 지정할 때 줄바꿈 문자열을 넣어줘야 하는 경우가 있다.

<br>이라거나 \r\n 이라거나 잔뜩 있긴 하지만서도, jsp 안에서 html로 그려질 때에는 먹히지 않는다.


가볍게 &#10; 를 넣어주면 해결된다.

블로그 이미지

김생선

세상의 모든것을 어장관리

댓글을 달아 주세요

Starting Tomcat v5.5 Server at localhost' has encounterd a problem.


Server ports (8080, 8009) required by Tomcat v5.5 Server at localhost are already in use. The server may already be running in another process, or a system process may be using the port. To start this server you will need to stop the other process or change the port number(s).


뭐 대충보자면 톰캣 실행하는 데 있어 포트충돌난단 것이다.

해결방안은 작업관리자의 tomcat.exe 프로세스를 죽이면 된다고 하는데, 이건 톰캣을 따로 구축한 사람들만 뜨는지 난 해당사항이 없더라.


나처럼 이클립스 내부에서 톰캣연동하는 사람은, 작업관리자에서 javaw.exe 프로세스를 강종해주면 된다.

블로그 이미지

김생선

세상의 모든것을 어장관리

댓글을 달아 주세요

JSTL 

Jsp표준 태그 라이브러리(Jsp Standard Tag Library)의 약어

 

jstl을 가지고 할수 있는일

간단한 프로그램 로직의 구사(자바의 변수선언,if문for문 등에 해당하는 로직)

다른JSP페이지 호출(<c:redirect>,<c:import>)

날짜,시간,숫자의포맷

JSP페이지 하나를 가지고 여러 가지 언어의 웹 페이지 생성

데이터베이스로의 입력,수정,삭제,조회

XML문서의 처리

문자열을 처리하는 함수 호출

 

위에 있는 여러 가지 기능들 중 제일 마지막에 있는 '문자열을 처리하는 함수 호출'을 제외한 나머지 기능들은 모두 커스텀 액션 형태로 제공된다.

(*커스텀액션 : xml문법을 따르면서 특정한 동작을 수행하는 태그)
 

jstl을 살펴보면 커스텀액션이나 함수의 이름앞에 c,fmt,fn등이 접두어가 붙어 있는것을 볼수 있다 

표준 액션의 태그 이름 앞에는 모두 jsp라 는 한 종류의 접두어가 사용되는데 Jstl의 커스텀 액션과 함수에는 왜 이렇게 다양한 접두어가 붙는걸까?

그 이유는 Jstl이 다시 5개의 작은 라이브러리로 나뉘어지고 커스텀 액션과 EL 함수는 각각 다른 라이브러리에 속하기 때문이다. 

 라이브러리

기능 

URL식별자 

접두어 

 코어

일반프로그래밍 언어에서 제공하는 것과 유사한 변수 선언,실행흐름의 제어기능을 제공하고, 다른 JSP페이지로 제어를 이동하는 기능도 제공 

http://java.sun.com/jsp/jstl/core

 c

 포매팅

숫자,날짜,시간을 포매팅하는 기능과 국제화,다국어 지원 기능을 제공 

http://java.sun.com/jsp/jstl/fmt 

fmt 

 데이터베이스

데이터베이스의 데이터를 입력,수정,삭제,조회하는 기능을 제공 

http://java.sun.com/jsp/jstl/sql 

sql 

 XML처리

XML문서를 처리할때 필요한 기능을 제공

http://java.sun.com/jsp/jstl/xml 

xml 

 함수

문자열을 처리하는 함수를 제공 

http://java/sun/com/jsp/jstl/functions

fn 

 

위 표를 보면 c.fmt,fn이라는 접두어가 있다. 그리고 이것은 각각 코어라이브러리,포매팅 라이브러리,함수라이브러리의 접두어라 표시되어 있다. 하지만 라이브러리를 구분하는 것은 사실상 접두어가 아니라 위표에 나와있는 URI실별자이다. 접두어는 단지 코딩을 간편하게 하기 위해 사용되는 수단일 뿐이다. 그러므로 Jsp페이지에서 이 접두어를 사용하기 위해서는 먼저 라이브러리의 UTI식별자와 접두어를 연결해야한다. 그런 일은 taglib 지시자를 통해 할수 있다.

 

taglib지시자는 다른 지시자와 마찬가지로 <%@ ~ %>로 종료된다. 이 지시자에는 uri와 prefix라는 두 개의 애트리뷰트를 써야하고 이 두 애트리뷰트에 각각 URI 식별자와 접두어를 값으로 주어야 한다.

 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

                               ↑                                        

                           접두어                         라이브러리를 식별하는 URI

 

taglib는 jsp페이지의 맨 위쪽에 기술한다. 하지만 어디에 써도 상관은 없다.



출처 : http://blog.naver.com/kalmia888/177110388

[출처] JSTL|작성자 시아

블로그 이미지

김생선

세상의 모든것을 어장관리

댓글을 달아 주세요

에러:Choose unique values for the 'webAppRootKey' context-param in your web.xml files


해당 에러는 패키지 파일 이름 변경 후 web.xml 등에서 context-param의 param-value 값을 바꿔주지 않아서 생기는 문제.


패키지 파일 이름과 param-value를 일치시켜주면 해결된다.

블로그 이미지

김생선

세상의 모든것을 어장관리

댓글을 달아 주세요