Ajax로 delete 요청

1. jQuery 설치

<!--example.ejs 파일 하단에 설치-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
  위 jQuery 아래 부분에서!
  Delete 요청 개발  
</script>

2. Script 작성

<!--example.ejs 파일-->
<ul class="list-group">        
        <% for (var i=0; i<posts.length; i++) { %>              
          <li class="list-group-item">
            <p>post no: <%= posts[i]._id %></p> 
            <h4><a href="/detail/<%= posts[i]._id%>"><%= posts[i].name %></a></h4>
            <p>due: <%= posts[i].date %></p>        
            <button type="button" class="btn delete" data-id=<%= posts[i]._id %>>삭제</button>            
          </li>        
        <% } %>
</ul>    

• btn의 class명 'delete'
• data-id에 <%= posts[i]._id %> 연결

<!--example.ejs 파일-->    
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
  $('.delete').click(function(){
    $.ajax({
      method : 'DELETE',
      url : '/delete',
      data : { _id : e.target.dataset.id }
    }).done(function(result){
      //AJAX 성공시 실행 코드
  	  $(this).parent('li').fadeOut();
    })
  });
</script>

• delete 클래스명을 가진 요소의 클릭 이벤트 처리
• e.target.dataset.id: 지금 클릭한 요소의 data-id 값을 의미
• Server(index.js)로 delete 함수를 통해서 '/delete' 경로와 data를 전달
• $(this).parent('li').fadeOut(): 현재 클릭이벤트가 동작한 요소의, 부모 HTML중 li tag를 삭제 해주세요
• fadeOut(), slideUP() 등 있음

3. Server 부분 작성

//index.js 파일
app.delete('/delete', function(req, res){
  req.body._id = parseInt(req.body._id)
  db.collection('post').deleteOne(req.body, function(error, result){
    console.log('삭제성공')
  })
  res.send('삭제성공')
});

• app.delete()의 '/delete'로 연결하고,
• req.body에 담겨온 데이터(_id)를 사용
• { _id : 1 }로 보냈는데 넘어오면서 { _id : '1' }이 되어 있음. 그래서 parseInt(req.body._id) 필요