Javascript:댓글달기

틀:Javascript

Javascript:개요
Javascript:변수, 상수
1. Javascript:자료구조
Javascript:연산자
분기문
1. Javascript:조건문
2. Javascript:반복문
Javascript:선택자
1. Javascript:요소 내용 변경
2. Javascript:HTML로부터 데이터 받기
Javascript:이벤트
1. Javascript:클릭 이벤트
Javascript:AJAX
1. AJAX 활용
  1. Javascript:댓글달기
  2. Javascript:무한 스크롤링
Javascript:활용
1. Javascript:표 정렬

개요[편집 | 원본 편집]

html 안에 댓글과 관련한 태그들을 실시간으로 쌓아주면 댓글 추가를 구현할 수 있다.

과정

설명

코드

추가할 태그 쓰기

html 파일을 새로 쓴다.

<!--댓글에 해당하는 태그를 쓴다.-->

<div class="profile_img"><img src=""></div>
    <div class="comment_field">
        내용
    </div>
    <!--필요에 따라 삭제, 수정버튼을 구현한다.-->
    <div class="delete_button" data-name="delete">삭제</div>

댓글 추가 구현

//자바스크립트 함수 안에 ajax호출 명령을 쓴다.

    $.ajax({
        type:'POST',
        url:'위에서 작성한 html 주소.',
        data:'',
        dataType:'html',
        success:(data)=>{
            document.querySelector('.comment_container').insertAdjacentHTML('beforeend',data)
            //comment_container클래스를 가진 태그 안쪽 가장 아랫쪽에 넣는다는 의미.
        },
        error:()=>{}
    });
    const comment = document.querySelector('#아이디 등 선택자')
    comment.value = '';  // 인풋에 내용이 남아있는데, 이걸 지워준다.

댓글 삭제 구현

function delegation(e){
    let target = e.target;  // 이벤트객체 e를 이용한 것. 어떤 것을 클릭했는지 알려준다.
    console.log(target);
    while(!target.getArribute('속성')){
        target = target.parentNode;  //찾는 속성이 없는 경우, 부모에서 속성을 찾는다.
        if(target.nodeName === 'BODY'){target = null; return;}  // 바디까지 올라가도 없으면 없음. 종료시켜준다.
    }
    if(target.matches('[data-neme="delete"]')){
        if(confirm('지운다 이거~?')===True){  // 확인을 누르면 True를 반환한다.
            $.ajax({
                type:'POST'
                url:'json',
                data:'',
                dataType:'json',
                success:(response)=>{
                    if(response.status){  // json에서 status를 지정해둔다.
                        let comt = document.querySelector('#아이디선택자.');
                        comt.remove  // 해당 요인을 실시간으로 지운다.
                    }
                    
                }
                error:()=>{}
            })
        }
    }else if(target.matches('[속성명2="값2"]')){
        해당 버튼에 대한 명령
        target.classList.toggle('on');  // 실시간으로 좋아요 버튼을 활성화하는 등에 쓰인다.
}

window.addEventListener('click', delegation);

Javascript:댓글달기

개요[편집 | 원본 편집]

둘러보기 메뉴

검색