ajax - 댓글 삭제

프로젝트를 진행하며 ajax를 사용해보았는데 정리를 해보겠다.

 

// 추천 게시판 댓글 삭제
	@RequestMapping("deleteReply")
	@ResponseBody
	public int deleteReply(Reply reply, Model model, HttpSession session) {
		
		int result = 0;
	   
	    if(session.getAttribute("id").equals(reply.getMember_id())) {
	    	System.out.println("아이디 일치");
	    	result = replyService.deleteReply(reply.getReply_no());
	    }
//	    
//	    model.addAttribute("result", result);
//	    model.addAttribute("rec_no", reply.getRec_no());	// result에서 디테일로 넘어갈 때 필요
		return result;
	}

RecommendController.java

 

주석 처리를 지우지 않은 이유는 원래 return 값으로 "recommend/deleteReplyResult";를 줄 생각으로 model 객체에 result 값과 rec_no 값을 넘겨주려고 썼었는데 ajax를 처리하며 return 값도 result로 바꿔 주어서 필요없어졌기에 기록용으로 남겨두었다.

 

❗️return에 적어둔 값에 resolver가 .jsp를 붙이지 않은 이유는 @ResponseBody라는 어노테이션을 써줬기에 때문에 반환값을 JSON 형태로 준다.

 

클라이언트 -> 서버 : @RequestBody

서버 -> 클라이언트 : @ResponseBody

✅ 클라이언트에서 서버로 필요한 데이터를 요청하기 위해 JSON 데이터를 요청 본문에 담아서 서버로 보내면, 서버에서는 @RequestBody 어노테이션을 사용하여 HTTP 요청 본문에 담긴 값들을 자바 객체로 변환시켜, 객체에 저장한다.

✅ 서버에서 클라이언트로 응답 데이터를 전송하기 위해 @ResponseBody 어노테이션을 사용하여 자바 객체를 HTTP 응답 본문의 객체로 변환하여 클라이언트로 전송한다. return 타입에 맞는 MessageConverter를 통해 return 하는 객체를 해당 타입으로 변환해서 클라이언트로 전달하게 된다.

 

 

 

<span> 
	<c:if test="${id eq list['MEMBER_ID']}">
		<button class="btn btn-primary" id="deleteButton" 
        onClick="deleteReply('${rec_no}','${id}','${list['REPLY_NO']}')">삭제</button>
	</c:if>
</span>

 

상세 페이지로 넘어오는 컨트롤러에서 받아온 값들을 매개변수란에 써준다.

 

<script>
// 댓글 삭제 
function deleteReply(rec_no, id, reply_no) {
    $.ajax({
        type: 'POST', // HTTP POST 메서드 사용
        url: 'deleteReply', // url
        data: {'rec_no':rec_no,'member_id':id,'reply_no':reply_no}, // url로 넘겨줄 값
        
        success: function (result) { // data는 위의 요청이 성공되면 받는 return값(컨트롤러에서 넘어옴)
            // 성공적으로 삭제되었을 때의 동작
            if(result == 1){
            alert('댓글 삭제 성공!');
            location.href="recommendDetail?rec_no=${rec_no}";
            }else{
            alert('댓글 삭제에 실패했습니다.');
            history.go(-1);
            }
            
        },
        error: function (error) {
            // 삭제 실패 시의 동작
        }
    });
}
</script>

recommendDetail.jsp

 

success에 써있는 result는 원래 data로 써있었는데 내가 임의로 바꾼 것이다.

바로 윗 줄의 data 값과 다른 의미인데 이름이 같으면 혼동할 거 같아서 바꿔놓았다!

 

 

<!--  댓글 삭제 -->
 	<delete id="deleteReply" parameterType="int">
 		delete from reply where reply_no = #{reply_no}
 	</delete>

 reply.xml

 

 

이렇게 해주면 ajax로 댓글 삭제하기가 성공적으로 실행된다!