[Thymeleaf] ajax 이용해 비동기식 화면 수정(더보기, 댓글 구현)

1. Thymeleaf와 ajax 이용해서 화면 깜빡임 없이 데이터를 추가하기

댓글 작성이나, 더보기 버튼을 구현할 때 유용한 방법이다.

이 방법을 사용하지 않았다면 append 쓰면서 더럽게 html 코드를 짜야했을 수도,,

 

2. 구축 환경

• IntelliJ 2021.3 (community 버전)
• Thymeleaf
• SpringBoot 2.1.3.RELEASE

 

3. 코드

1.  controller 부분 작성하기

@Controller
public class AjaxTestController {
	
	@GetMapping("/get/member") 
	public String getMembers(Model model) throws Exception {
		
		Map<Integer, String> memberList = new HashMap<>(); // <번호, 이름>으로 구성된 가상의 멤버 리스트
		memberList.put(1, "가");
		memberList.put(10, "나");
		memberList.put(20, "다");
		memberList.put(200, "라");
		
		model.addAttribute("memberList", memberList);
        
		return "index :: #moreList"; // template html 파일 이름 + '::' + fragment의 id
		
	}
}

 

2. 스크립트 부분 작성하기

$.ajax({
    url: "/get/member,
    type: "GET",
})
.done(function (fragment) {
    //$('#hiList').replaceWith(fragment);
    $('#hiList').append(fragment);

});

 

3. html 작성하기

<!-- 파일 목록 -->
<ul id="hiList">
    <li>

    </li>

    <!-- viewmore 클릭시 목록 뿌려주는 부분 -->
    <th:block th:if="${memberList != null}" >
        <li id="moreList" th:fragment="moreList">

        </li>
    </th:block>
</ul>

<!-- 파일 목록 -->


<!-- viewmore -->
<div class="btnWrap">
    <a href="javascript:void(0);" class="btn more" id="hi">View more</a>
</div>

th:fragment="moreList" 라는 Attribute를 추가한다.

이것은 Ajax를 통해 받아온 데이터를 활용해서 이 부분 전체 태그를 교체해주기 위한 역할을 함.