[MyBatis] #5-4 AJAX를 활용한 댓글 게시판 만들기 4 - 댓글 수정하기(Update)

1. Model

 * 짚고 넘어갈 뽀인트

-  update문 작성

 

1) content.xml

<update id="update" parameterType="kr.co.itwill.comment.CommentDTO">
    <![CDATA[
    UPDATE pcomment
    SET content=#{content}
    WHERE cno=#{cno}
    ]]>
</update>

 

2) contentDAO.java

public int commentUpdate(CommentDTO comment) {
    return sqlSession.update("comment.update", comment);
} // commentUpdate() end

 

2. View

 * 짚고 넘어갈 뽀인트

- 댓글 수정 버튼을 누르면 댓글 내용 칸이 input 폼으로 바뀌며 원래 써져있던 댓글 내용이 출력.

- 수정시 commentUpdateProc 함수 호출.

- 자바스크립트에서는 if문이 한줄이라면 중괄호( { , } ) 를 생략해도 된단다!(이게 뭐야!!)

 

// 댓글 수정 - 댓글 내용 출력을 input 폼으로 바꾸기
function commentUpdate(cno, content) {
    let a = "";
    a += "<div class='input-group'>";
    // a += "	<input type='text' name='content_" + cno + "' value='" + content + "'>";
    a += "	<input type='text' id='content_" + cno + "' value='" + content + "'>";
    a += "	<button type='button' onclick='commentUpdateProc(" + cno + ")'>수정</button>";
    a += "</div>";

    $(".commentContent" + cno).html(a);
} // commentUpdate() end 

// 댓글 수정
function commentUpdateProc(cno) {
    // let updateContent = $('[name=content_' + cno + ']').val();
    let updateContent = $('#content_' + cno).val();

    $.ajax({
        url:"/comment/update"
        ,type:"post"
        ,data:{'content':updateContent, 'cno':cno}
        ,success:function(data){
            if(data==1) commentList();
        }
    }); // ajax() end
} // commentUpdateProc() end

 

3. Controller

 * 짚고 넘어갈 뽀인트

- update 명령어 생성

- 댓글의 번호인 cno와 새로 수정될 본문 내용 content를 DTO로 저장하고 넘겨준다.

@ResponseBody
@RequestMapping("/update")
private int mCommentServiceUpdate(@RequestParam int cno, @RequestParam String content) throws Exception {
    CommentDTO comment = new CommentDTO();
    comment.setCno(cno);
    comment.setContent(content);
    return commentDao.commentUpdate(comment);
} // mCommentServiceInsert() end