[JS] 댓글 작성/수정/삭제 후 비동기 방식으로 출력

3가지 방법 중 3번 방법을 사용했다.

 

 

1. 기존 댓글 리스트를 비운후 다시 DB에서 해당 글의 댓글 리스트를 가져온다. 반복문으로 하나씩 출력

https://dawitblog.tistory.com/129

AJAX로 댓글달기 기능 구현

 

 

2. 댓글 작성에 성공하면 location.href로 요청을 보내기

댓글 리스트 부분만 갱신하면 되므로 이 방법은 비효율적이다.

https://www.youtube.com/watch?v=ZzWXzj9vg44&t=1217s 

 

 

3. 기존 댓글 테이블을 등록/수정/삭제 후 최신 댓글 테이블로 교체한다.

이 방법을 사용했다.

https://chaelin1211.github.io/study/2021/04/14/thymeleaf-ajax.html

[Thymeleaf] ajax를 이용해 비동기식 화면 수정 - Chaelin's Blog

 

🌿 댓글을 등록하는 예제

@PostMapping("/view")
    public String viewPostMethod(Model model, @RequestBody Map<String, String> map, Principal principal) {
        // DB 댓글 추가
        String comment=map.get("comment");
        Long post_id=Long.parseLong(map.get("post_id"));
        commentService.commentSave(principal.getName(), post_id, comment);

        // 댓글 리스트 추가
        model.addAttribute("commentList", postService.getCommentList(post_id));

        return "/post/detail :: #commentTable";
    }

댓글 등록 컨트롤러

 

function saveComment() {
            if(!isValid("reply")) {
                return false;
            }

            var content = document.getElementById("reply");
            var commentMsg=document.getElementById("reply_msg");
            var post_id=[[${post.id}]];

            var uri = "/comment/view";
            var headers = {"Content-Type": "application/json", "X-HTTP-Method-Override" : "POST"};
            var params = {"comment" : content.value, "post_id" : post_id};

            $.ajax({
                url: uri,
                type: "POST",
                headers : headers,
                data: JSON.stringify(params),
            })
            .done(function (fragment) {
                $('#commentTable').replaceWith(fragment);
            });
        }

댓글 등록 JavaScript

POST 방식으로 /comment/view에 요청을 보낸다.

id가 commentTable인 곳을 fragment로 대체

 

<div id="commentTable" th:with="username=${#authentication.name}">
            <div class="card-header bi bi-chat-dots mt-3">
                <span th:if=${commentList} th:text="${#lists.size(commentList)}"></span>
                Comments
            </div>
            <div th:each="comment:${commentList}" class="card">
                <ul class="list-group-flush">
                    <li class="list-group-item">
                        <form method="post">
                            <span th:text="${comment.username}" style="font-size: small"> 작성자 </span>
                            <span th:text="${#temporals.format(comment.createdDate, 'yyyy-MM-dd HH:mm')}" style="font-size: xx-small"> 날짜 </span>
                            </br>
                            <span th:text="${comment.comment}">댓글</span>
                            <button type="button" th:if="${#strings.equals(comment.username, username)}" th:attr="onclick=|openModal('${comment.id}', '${comment.username}', '${comment.comment}' )|" class="bi bi-pencil" style="float : right"></button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>

댓글을 출력하는 HTML 소스 코드

Thymeleaf를 이용

댓글 작성자와 현재 로그인한 사용자가 같으면 모달 버튼이 나타난다.