node.js - ajax 삭제요청

HTTP 요청은 GET, POST, PUT, DELETE 4가지가 있다.

HTML 폼에서는 GET과 POST만 요청 가능.

 

그래서 삭제요청을 할 때 쓸 수 있는 3가지 방법이 있다.

1. method-override 라이브러리의 도움을 받는다

2. AJAX로 DELETE 요청을 날린다 

3. 그냥 POST요청을 날려서 DELETE 작업을 수행한다

 

REST한 API를 만들기 위해 1번과 2번을 쓴다. 오늘은 2번~

AJAX요청은 제이쿼리문법으로 하는게 간단해서 제이쿼리CDN을 문서에 포함해주자.

 

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

 

문법은 $.ajax부분 참고

<ul class="list-group">
  <% for (var i = 0; i < posts.length; i++){ %>
  <li class="list-group-item">
    <h4> 할일 제목 : <%= posts[i].제목 %> </h4>
    <p> 할일 마감날짜 : <%= posts[i].날짜 %> </p>
    <button class="delete" data-id="<%= posts[i]._id %>">삭제</button>
  </li>
  <% } %>
</ul>


// 버튼 클릭 시 해당 게시물 삭제
<script>
  $('.delete').click(function(){
    $.ajax({
      method : 'DELETE',
      url : '/delete',
      data : { _id : e.target.dataset.id }
    }).done(function(결과){
      //AJAX 성공시 실행할 코드는 여기
      $(this).parent('li').fadeOut();
    })
  });
</script>

 

서버 요청 문법

app.delete('/delete', function(요청, 응답){
  요청.body._id = parseInt(요청.body._id)
  db.collection('post').deleteOne(요청.body, function(에러, 결과){
    console.log('삭제완료')
  })
  응답.send('삭제완료')
});

parseInt로 db에 저장된 id의 데이터 타입과 맞춰주자.