[Spring Boot] Thymeleaf 에서 ajax 호출후 화면수정

Thymeleaf에서 비동기 호출 처리하기

기존 사용하던 방식보다 조금더 편리한 방법으로 AJAX호출 후 데이터를 처리하여 화면을 갱신 할 수 있습니다. 이 방법을 모르던 때에는 기존 작업하던 방식대로 JAVASCRIPT의 콜백함수에서 JSON 객체로 넘겨받은 데이터를 화면에 추가할 HTML문서를 코드로 작성후 JQUERY등을 통해 화면에 반영했던것에 비해 fragment를 재사용하여 화면을 갱신합니다. 이렇게 처리하였더니, 코드가 더 보기 편하고 스크립트 작성이 간단하게 되어 작업효율이 좋아졌습니다.

아래 코드를 참고하여 진행하면 이해가 편합니다.

thymeleaf

갱신할 부분을 코드화 합니다.

<!-- reply comment area -->
<div id="reply_area">
    <th:block th:each="item : ${replyList}">
        <p><strong th:text="${item.userName}">author</strong><span th:text="${item.content}">댓글 본문 영역</span></p>
    </th:block>
</div>

javascript

callParamsAjax를 호출하고 통신이 종료된후에 done에서 값을 받아 replaceWith로 fragment영역을 변환 합니다.

(참고) callParamsAjax는 매번 반복된 코드 작성을 피하려고 만든 공통스크립트이며, POST방식으로 전송합니다.

function reloadReply(value) {
    let param = {key: value}
    callParamsAjax(param, '/ajax-function-call', successCb, errorCb);

    function successCb(fragment) {
    	$("#reply_area").replaceWith(fragment);
    }

    function errorCb(err) {
        console.log(err);
    }
}

controller

/**
 * 댓글 목록 조회 (AJAX)
 */
@PostMapping("/ajax-function-call")
fun ajaxFunctionCall(model: Model, request: HttpServletRequest) : String {

    // 댓글 목록 조회
    replyService.getList().let { list: List<Reply> ->
    	model.addAttribute("replyList", list)
    }
    
    return "pages/fragment-reply-area :: #reply_area"
}

반환되는 내용중에 눈여겨볼 사항은

pages/fragment-reply-area : 컨트롤러에서 View로 전달할 Model객체의 내용을 화면에 표시할 실제 파일의 정보입니다.
#reply_area : Ajax통신후 결과를 반영할 ID 입니다.
@ResponseBody 어노테이션은 위와 같은 형식으로 비동기 결과를 반영할때는 사용하지 않습니다.
JSON 객체로 데이터를 반환할 경우에는 @ResponseBOdy 어노테이션을 사용합니다.

결과확인

아래 처럼 화면이동없이 입력된 내용이 노출되는걸 볼 수 있습니다.

예전처럼 JAVASCRIPT 콜백함수내에서 HTML을 생성하고 이를 화면에 반영하는 방식에 비해 코드가 더욱 간결해진 모습을 볼 수 있습니다. 추후 코드를 수정하더라도 작업시간이 더 짧아지는걸 예상 할 수 있습니다.

SpringBoot + Thymeleaf ! 사용하면 할 수록 더 매력적이네요.

저작자표시

우당탕탕 쌍둥이 아빠 생존기