리뷰 & 댓글 작성

ajax 사용

addEventListener를 사용하여 form submit할때 이벤트를 걸어 주었다.
리뷰 작성시 필요한 itemId, score(별점), 리뷰내용(content)를 담아 data로 보낸다.
beforeSend : 내 프로젝트는 csrf가 활성화 되어있기 때문에 Post 방식으로 보낼땐 반드시 csrf 토큰을 같이 보내주어야한다.
success : 추가된 리뷰를 포함해서 다시 화면을 재구성 한다. 별점(#inputGroupSelect01) 과 글내용(#txt_comment) 을 기본값으로 초기화 하고 replaceWith으로 방금 작성한 리뷰를 포함한 리뷰 리스트를 화면에 보여준다.

js

var header = /*[[${_csrf.headerName}]]*/;
var token = /*[[${_csrf.token}]]*/;

form.addEventListener("submit", e => {
e.preventDefault();
const itemId = $("input[name=itemId]").val();
const score = $("select[name=score]").val();
const content = $("textarea[id=txt_comment]").val();
 
        $.ajax({
			type: 'POST',
			url:'/review/new',
			data: JSON.stringify
			({'itemId' : itemId,
			    'score' : score,
			    'content': content,
			}),
			contentType: 'application/json',
			beforeSend : function(xhr)
            {
				xhr.setRequestHeader(header, token);
            }
           ,
			success: function(fragment){
                var html = $(fragment);
                var arrDiv = html.find(".comment_total");
                $('#txt_comment').val('');
                $("#inputGroupSelect01").val(0).prop("selected", true);
                $(".comment_total").replaceWith(arrDiv);
                var comment = html.find("#comment");
                $("#comment").replaceWith(comment);
            }
        });
});

controller

화면에서 보내준 data는 @ReuqestBody ReviewForm으로 mapping된다. extracted()메서드는 아이템정보와 아이템에 해당하는 리뷰를 다시 조회해서 model에 담아준다.

리뷰 댓글 삭제

removeReview인자로 삭제할 reviewId를 받아 url을 작성한다. 생성과 똑같이 success 시 삭제된 review를 뺀 review들을 재갱신 해준다.

js

function removeReview(id) {
const itemId = $("input[name=itemId]").val();
    var url = "/review/delete/" + id;
     $.ajax({
			type: 'delete',
			url: url,
			data:
			{'itemId' : itemId},
			beforeSend : function(xhr) {
				xhr.setRequestHeader(header, token);
            },
			success: function(fragment){
                var html = $(fragment);
                var arrDiv = html.find(".comment_total");
                $('#txt_comment').val('');
                $("#inputGroupSelect01").val(0).prop("selected", true);
                $(".comment_total").replaceWith(arrDiv);
                var comment = html.find("#comment");
                $("#comment").replaceWith(comment);
            }
        });
}

controller

@PathVariable을 사용하여 url로 전달된 reviewId 파싱
reviewService delete호출후 생성에서 처럼 extracted()메서드 호출