[MyBatis] #5-3 AJAX를 활용한 댓글 게시판 만들기 3 - 댓글 목록 보기(select)

 

1. Model

 * 짚고 넘어갈 뽀인트

-  select문 작성

 

1) content.xml

<select id="list" resultType="kr.co.itwill.comment.CommentDTO" parameterType="int">
    <![CDATA[
    SELECT cno, pno, content, wname, regdate
    FROM pcomment
    WHERE pno = #{pno}
    ]]>	
</select>

 

2) contentDAO.java

public List<CommentDTO> commentList(int pno) {
    return sqlSession.selectList("comment.list", pno);
} // commentList() end

 

2. View

 * 짚고 넘어갈 뽀인트

- 댓글이 AJAX를 통해 비동기식으로 구현.

- list 명령어를 통해 List 컬렉션에 담긴 여러 정보들을 $.each 반복문의 key와 value로 표현

 : key - 순서 / value - Object object (List에 컬럼명:컬럼값으로 담겨있는 Object를 담는다)

 : 예) value.cno | key번째 행의 cno 컬럼이 갖고 있는 값을 가져온다.

- 페이지 로딩 시 자동으로 댓글 불러오기 기능 구현.

// 댓글 목록
function commentList(){
    $.ajax({
         url:"/comment/list"
        ,type:"get"
        ,data:{'pno':pno}
        ,success:function(data){
            // alert(data);
            let a = "";
            $.each(data, function(key, value){
                a += "<div class='commentArea' style='border-bottm:1px solid darkgray; margin-bottom:15px;'>";
                a += "	<div class='commentInfo" + value.cno + "'>";
                a += "		댓글번호 : " + value.cno + " / 작성자 : " + value.wname + " " + value.pno;
                a += "		<a href='javascript:commentUpdate(" + value.cno + ", \"" + value.content + "\");'>수정</a>";
                a += "		<a href='javascript:commentDelete(" + value.cno + ");'>삭제</a>";
                a += "	</div>";
                a += "	<div class='commentContent" + value.cno + "'>";
                a += "		<p>내용 : " + value.content + "</p>";
                a += "	</div>";
                a += "</div>";
                // alert(a);
            }); // each end

            $(".commentList").html(a);
        } // success end
    }); // ajax() end
} // commentList() end

// 페이지 로딩 시 댓글 목록 출력시키기
$(document).ready(function(){
    commentList();
}); // ready() end

 

3. Controller

 * 짚고 넘어갈 뽀인트

- list 명령어 생성

- 여러 행을 List 컬렉션으로 저장, 이 때 부모 번호를 꼭 가지고 간다.

@RequestMapping("/list")
@ResponseBody
private List<CommentDTO> mCommentServiceList(@RequestParam int pno) throws Exception {
    return commentDao.commentList(pno);
} // commentlist() end