Java/Spring

[Spring] page 전환 없이 body(content)만 변경하는 방법

은정재 2022. 12. 5. 13:40

1. tiles.xml

template을 2개로 나누어 적용한다.

- mainLayout.jsp : 공통으로 사용될 header, menu, body(최초 로딩되는 페이지의 body), footer 구성

- mainLayout2.jsp : body(변경될 body)로만 구성

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
       "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
       "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">

<tiles-definitions>
    <definition name="*/*" template="/WEB-INF/jsp/tiles/mainLayout.jsp">
	<put-attribute name="header" value="/WEB-INF/jsp/tiles/header/mainHeader.jsp" />
	<put-attribute name="menu" value="/WEB-INF/jsp/tiles/menu/mainMenu.jsp" />
	<put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" />
        <put-attribute name="footer" value="/WEB-INF/jsp/tiles/footer/mainFooter.jsp" />
    </definition>

    <definition name="test/*/*" template="/WEB-INF/jsp/tiles/mainLayout2.jsp">
        <put-attribute name="body" value="/WEB-INF/jsp/{1}/{2}.jsp" cascade="true" />
    </definition>

</tiles-definitions>

 

2. Layout

mainLayout.jsp는 <main> 태그에 id를 부여하여 직접적으로 핸들링이 가능하도록 한다.

<!-- mainLayout.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<!DOCTYPE html>
<html lang="ko">
	<tiles:insertAttribute name="header" />
<body>
	<tiles:insertAttribute name="menu" />
	<main id="main"><tiles:insertAttribute name="body" /></main>
	<tiles:insertAttribute name="footer" />
</body>
</html>
<!-- mainLayout2.jsp -->
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>

	<tiles:insertAttribute name="body" />

 

3. JSP

Test를 위해 clickable한 영역을 준비한다.

<ul>
	<li id="_testTables">
		<div>
			<span>Click Here!</span>
		</div>
	</li>
</ul>

 

4. Javascript

위 <li> 선택 시 <main> 태그의 id를 활용하여 기존 body를 제거하고, 새로운 body를 생성한다.

$('#_testTables').on('click', function() {
	$('#main').children().remove();
	$('#main').load("/test/test.do");				
});

 

5. Controller

페이지 로딩(body부분만 변경)을 위한 컨트롤러 RequestMapping

- return 형식 : 반드시 tiles.xml의 definition 규칙을 준수해야 한다. ( definition name="test/*/*" )

@RequestMapping(value = "/test/test.do")
public String test(HttpServletRequest request, ModelMap model) throws Exception {
	return "test/tables/samplePage";
}

 

 

Test Environment Info.
- OS : Windows 10 Pro

- IDE : Eclipse 2019-03 (4.11.0)