댓글에 대한 댓글 달기 기능 구현


댓글의 댓글 기능을 구현하려고 합니다.

다음 웹툰 댓글 이미지

위 이미지는 다음 웹툰 댓글의 일부를 캡쳐한 것입니다.

답글 3 이라는 a태그를 누르면 아래로 댓글들이 로딩 되는데요.

제 생각으로는 이 페이지를 처음 불러올 때 댓글의 댓글까지 불러오기 보다는 댓글 3 이라는 a태그를 눌르면 그 때 불러오는게 효율적일 것 같은데요.

댓글 3 을 눌렀을 때 어떤 방법으로 불러와야 새로고침 되지 않고 아래로 로딩할 수 있을지 방법이 떠오르지 않아 질문 드립니다.

초보에게 설명한다 생각하시고 조금 자세히 설명 주시면 감사드립니다!

  • 2016년 10월 23일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 132


1 답변


좋아요
3
싫어요
채택취소하기

AJAX를 이용하시면 됩니다. 아래는 간단한 예제입니다

<div id="comment">
    이것도 내용이라고...
    <a href="#" onclick="reply_load()">답글보기</a>
</div>
<div id="reply">
    <!-- 여기에 답글이 로드됨 -->
</div>

댓글을 간단한 마크업으로 구성해봤습니다

#comment 는 댓글부분이고 #reply는 나중에 답글을 불러올곳으로 가정하겠습니다

페이지를 열면 #comment 에 댓글만 가져와서 뿌리고 #reply에는 아무것도 없이 그냥 둡니다

여기서 답글보기 a 태그를 누르면 onclick 이벤트가 발생하고 reply_load() 함수가 실행됩니다

function reply_load() {
    // ajax를 이용해서 서버에서 답글을 가져온다
    $("#reply").append(가져온 데이터를 보기좋게 가공해서 추가);
}

reply_load 함수엔 이렇게 기술이 되어있는데

서버에서 댓글의 답글을 가져오는 부분을 만드셔야 합니다

댓글의 답글을 가져오는 부분에서 받아야 할 값은 디비에 저장된 댓글의 고유번호(id) 이겠죠. 그걸로 쿼리를 구성하시면 됩니다

지금 컬럼구성이 어떻게 되어있는지 몰라서 쿼리 예제는 못 적겠네요

아무튼 가져온뒤 #reply에 추가시켜 줘야합니다

핵심키워드는 jquery ajax 입니다. 구글에 검색하시면 예제가 많이 나옵니다

  • 2016년 10월 24일에 작성됨
    웹을 좋아함

  • append() 로 태그를 추가하는 방법이군요. 고맙습니다.    상남자   2016.10.25 02:35     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close