DB 데이터 삭제 (AJAX)

서버랑 통신할 수 있게 도와주는 JS 문법

새로고침 없이 서버랑 통신할수 있음(가장 큰 장점)

 

AJAX 기본 문법

(list.ejs 하단)

<script src="https://code.jquery.com/jquery-3.4.1.min.js">>

<script>
  $.ajax({
    method : 'DELETE',
    url : '/delete',
    data : '1번게시물'
  }).done(function(결과){
    AJAX 성공시 실행할 코드는 여기
  }).fail(function(에러){
    실패시 실행할 코드는 여기
  });
</script>

 

Server 쪽 기본 틀

(server.js)

app.delete('/delete', function(요청, 응답){
  DB에서 글 삭제해주쇼
  응답.send('삭제완료')
});

 

삭제 시 화면 내 즉각 반영 두가지 방법 + 성공/실패 시 동작

 

(list.ejs)

$('.delete').click(function(e){ // class 명이 delete 인 요소를 클릭하면
            var 글번호 = e.target.dataset.id; // e.target > 지금 클릭한 것
            var 지금누른거 = $(this); // this > 지금 이벤트 동작하는 곳
            // 지금 누른 값의 data-id 를 가져와주세요.
            $.ajax({
            method : 'DELETE',
            url : '/delete',
            data : {_id : 글번호 } // 지금 내가 클릭한 버튼의 _id를 여기에 넣기
          }).done(function(결과){
            console.log('성공했어요'); // 브라우저 개발자 도구에 출력
            // 사용자 입장에서는 바로바로 삭제 데이터가 없어졌음 한다.
            // 1. 페이지를 강제로 고침해주세요.
              // location.reload();

            // 2. 삭제버튼을 누른 <li> 요소를 제거해주세요. / 안보이게
              지금누른거.parent('li').fadeOut();
              // 지금누른거의 부모 중 li를 찾아서 서서히 사라지게 해주세요.

          }).fail(function(xhr,code,err){
            console.log(xhr,code,err);         

          });
        })

 

(server.js)

app.delete('/delete', function(요청,응답){
    console.log(요청.body) // 요청.body 에 담긴 게시물 번호에 따라 삭제 예정
    요청.body._id = parseInt(요청.body._id);
    db.collection('feData').deleteOne(요청.body, function(에러, 결과){
        console.log('삭제완료');
        // 이때 바로 삭제는 안되는데, 숫자형으로 일치시켜줘야한다. ParseInt
        // 데이터를 요청하고 주고 받을때 문자로 치환되는 경우가 많다.
        // 버튼을 눌러야 삭제되도록 하는 방법은 list 에서 수정필요

        응답.status(200).send({ message : '성공했습니다. '}) // 응답코드 200을 보내주세요.
        // 응답.status(400).send({ message : '실패했습니다. '}) // 잘못된 요청
        // 응답.status(500); // 서버 문제
        
    });
})