[스프링] 프로젝트 - 게시판 댓글 구현(댓글 삭제 편)

[관련 게시글]

• 댓글 리스트 출력
• 댓글 수정하기
• 댓글 페이징처리

 

 

[원리의 이해]

댓글의 삭제의 포인트는 아래 두 가지이다.

- 해당 행을 선택해야 함

- 선택된 행을 'DB'와 '화면상'으로 삭제해야 함

- 삭제 시, 해당 data만 업데이트되어야 하기 때문에 비동기 ajax를 사용

 

 

 

[View][HTML]

지난 번 작성한 코드에 행을 선택하기 위해서 index를 부여해야 함으로 varStatus를 추가

삭제버튼을 클릭하면 현재 행번호를 매개변수로 'commentDeleteCheck' 함수가 실행

<div>
    <table>
        <c:forEach var="list" items="${commentList}" varStatus="status">
			
            <!--status의 index를 출력-->
            <tr id="cno1${status.index}">
            
                <td>${list.nickName}&emsp;|&emsp;${list.c_date}</td>
                <td><input type="hidden" value="${list.r_no}"></td>
                <td><input type="hidden" id="cnoNo${status.index}" value="${list.cno}"></td>

                <td>
                    <c:choose>
                        <c:when test="${sessionScope.sessionId==list.id}">
                            <ahref="#" id="edit${status.index}" onclick="commentEdit(${status.index}); return false;">수정</a>
                        </c:when>
                    </c:choose>
                </td>
                <td>
                    <c:choose>
                        <c:when test="${sessionScope.sessionId==list.id}">
                            <a  href="#" onclick="commentDeleteCheck(${status.index})">삭제</a>
                        </c:when>
                    </c:choose>
                </td>
			
            </tr>

        </c:forEach>
    </table>
</div>​

 

 

[View][Ajax]

삭제 전, 삭제 여부 확인되면 해당 행의 (id + 행번호의 값)=(댓글번호)을 불러와 DB에서 delete하는 controller를 호출하고

화면에 보이는 내용은 제이쿼리를 통해 지워줄 수 있도록 함

/* 댓글 삭제 전 check */
function commentDeleteCheck(Vindex){

    if (confirm("정말 삭제하시겠습니까?") == true){   

        var cnoNo = $('#cnoNo'+Vindex).val(); //cno값을 가져옴

            $.ajax({
                url : "${pageContext.request.contextPath}/commentDelete",
                data : {cno : cnoNo},
                dataType :'text', 
                success : function(data){
                    if(data == '1'){
                        $('#cno1'+Vindex).remove();
                    }
                }
            });

    }else{  
           return false;	
         } 
}