SpringBoot | 새로고침없이 페이지 부분변경하기(Ajax)

| 페이지 부분변경

아래와같이 새로고침도 없고 url 변경없이 페이지 부분 변경하기 위해서는 ajax를 사용하면 된다

 

index.html

    <div class="content_box" >
        <div th:replace="${#lists.isEmpty(sheetList)} ? ~{defaultPage :: content_box} : ~{content::content_box}">
        </div>
    </div>

index.js

 

 openPlanner(sheetId){
    $.ajax({
        type : 'GET',           // 타입 (get, post, put 등등)
        url : '/main/'+sheetId,           // 요청할 서버url
        async : false,
        dataType : "HTML",
        success : function(result) { // 결과 성공 콜백함수
            $('.content_box').children().remove();
            $('.content_box').html(result);
        }}
    )
}

pageController

@Controller
@RequestMapping("")
@RequiredArgsConstructor
public class PageController {
    private final SheetApiLogicService sheetApiLogicService;
    private final BoardApiLogicService boardApiLogicService;
    private final SheetRepository sheetRepository;
    private final KakaoLoginService kakaoLoginService;
    private final ProfileImageApiLogicService profileImageApiLogicService;

    @GetMapping("main/{sheetId}")
    public String sheetDetail(@PathVariable Long sheetId, HttpServletRequest httpServletRequest, ModelMap map){
        HttpSession session = httpServletRequest.getSession();
        Long memberId = (Long)session.getAttribute("memberId");
        String userId = (String)session.getAttribute("userId");
        String userName = (String)session.getAttribute("userName");
        String profileImage = (String)session.getAttribute("profileImage");
        if(session.getAttribute("userId")==null){
            return "redirect:/login";
        }
        Map<Long, Map> boardList= boardApiLogicService.read(sheetId);
        List<Sheet> list = sheetApiLogicService.list(memberId);
        String sheetName = sheetRepository.findById(sheetId).get().getPlannerTitle();

        map.addAttribute("sheetName",sheetName);
        map.addAttribute("sheetId",sheetId);
        map.addAttribute("sheetList",list);
        map.addAttribute("userId",userId);
        map.addAttribute("memberId",memberId);
        map.addAttribute("userName",userName);
        map.addAttribute("profileImage",profileImage);
        map.addAttribute("boardList",boardList);
        return "content";
    }

}

 

content.html

<div class="center_box" th:fragment="content_box">
    <div class="title_div">
        <input type="text" id = "openedSheetId" style="display: none;" th:value="${sheetId}">
        <div class="title">
            <span class="title_input" onfocusin="titleFoIn(event)" onfocusout="titleFoOut(event)"  id="title_input" role="textbox" contenteditable th:text="${sheetName}!=null ? ${sheetName}:null "></span>

            <button class="modify_btn" onclick="modifyBtn(event)" id='modify_btn'>
                <img src="/image/index/modify.png" alt="">
            </button>

        </div>
        <button class="plusbtn" id="plusbtn" onclick="openPlus(event)">
            <img class="plusimg" src="/image/index/plusimg.png" alt="">
        </button>
    </div>

    <div class="create_div" id="create_div">
        <table class="create_tb">
            <thead>
            <td>
                <div class="create_tb_title">
                    <p>등록</p>
                    <button id="cr_xbtn" onclick="closePlus(event)">x</button>
                </div>
            </td>
            </thead>
            <tbody>
            <td>
                <div class="create_content_div">
                    <p>일(day)과 내용을 입력해주세요</p>
                    <p><input id="date_info" type="text" placeholder="숫자만 입력가능합니다"></p>
                    <p><input id="content_info" type="text" placeholder="ex) 전기요금, 가스요금"></p>
                    <p><input id="submit_btn" type="submit" value="등록" th:onclick="|addPlan(${sheetId})|"></p>
                    <p id="tip">tip: 31일 이상도 입력가능합니다</p>
                </div>
            </td>
            </tbody>
        </table>
    </div>
    <ul class="main_content" id="maincontent">
        <li>
            <table class="main_content_table" th:each="board : ${boardList}" >
                <thead>
                <tr>
                    <td class="date_info" th:text="|${board.getKey()}일|">1 일
                        <hr>
                    </td>
                </tr>
                </thead>
                <tbody th:each="list : ${board.getValue()}">
                <tr class="content">
                    <td class="content_info">
                        <span th:text="${list.getValue()}">가스비</span>
                        <button class="content_info_xbox" th:onclick = "|delBoard(${list.getKey()},event)|" >X</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </li>
    </ul>
</div>