Egov Spring ajax 활용 예시 / 동적인 사진첩 메뉴 구현

완성된 UI 모습

1. 각 메뉴 클릭 시 해당하는 최근 게시글 및 사진 출력

<ul class="tab_menu main_tab">
    <li onclick="port('B')" class="current"><a href="#main_tab01"><span class="icon_tab01"></span><span>시공사례</span></a></li>
    <li onclick="port('R')"><a href="javascript:void(0)"><span class="icon_tab02"></span><span>추천설계</span></a></li>
    <li onclick="port('S')"><a href="javascript:void(0)"><span class="icon_tab03"></span><span>시공현장</span></a></li>
    <li onclick="port('I')"><a href="javascript:void(0)"><span class="icon_tab04"></span><span>인테리어사례</span></a></li>
</ul>

2. JSP onclick 함수를 달아 구분값을 전송

function port(category){
    $.ajax({   
        method : "POST",
        url : "/ft/main/addList.do", 
        data : {"category" : category},
        dataType: "html", 
        success : function(data){  
            $("#main_tab01").html(data);
        }
    })
}

3. ajax 함수 선언

4. 결과 값인 html 문자열을 html 함수를 활용해 읽은 후 id = "main_tab01" 에 붙인다.

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:directive.include file="/WEB-INF/jsp/cmmn/incTagLib.jsp"/>

<ul class="clear">
	<c:if test="${fn:length(resultList) gt 0}">
		<c:forEach var="result" items="${resultList }">     
			<c:choose>
				<c:when test="${not empty result.poAtchFileId }"> 
					<li onclick="fncPageBoard('view','view.do','${result.poSeq}','poSeq')">       
						<img src="/atch/getImage.do?atchFileId=${result.poAtchFileId }&fileSn=0" style="width:264px; height:318px;" alt="" onerror="/isp/src/main/webapp/publish/ft/images/main/bg_business.png">
						<a href="/ft/port/${category}/view.do?poSeq=${result.poSeq }"><span class="hover_txt"><strong>${result.poTitle }</strong>${result.poRgstDt }</span><span class="more">상세보기 +</span></a>
					</li>  
				</c:when>
				<c:otherwise>  
					<li>
						<img src="https://w7.pngwing.com/pngs/855/341/png-transparent-pokemon-pikachu-pikachu-pokemon-x-and-y-pokemon-go-pokemon-ruby-and-sapphire-ash-ketchum-pokemon-dog-like-mammal-cartoon-snout-thumbnail.png" style="width:264px; height:318px;">
						<a href="/ft/port/${category }/view.do?poSeq=${result.poSeq }"><span class="hover_txt"><strong>${result.poTitle }</strong>${result.poRgstDt }</span><span class="more">상세보기 +</span></a>
					</li>
				</c:otherwise> 
			</c:choose>
		</c:forEach>
	</c:if>           
</ul>

5. 붙여질 페이지 동적 설계

 

장점 

1. ajax 통신으로 페이지 새로고침 없이 곧바로 업데이트를 확인할 수 있다.

2. 빠르고 간편하다.

단점

1. 클릭만 해도 서버에 요청이 가기에 접속자가 많거나 악의적으로 빠르게 연달아 클릭할 경우 서버에 부하가 걸릴 수 있다.