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

조회수 4278회

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

다음 웹툰 댓글 이미지

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

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

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

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

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

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 입니다. 구글에 검색하시면 예제가 많이 나옵니다

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

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.