[Node.js] AJAX로 DELETE 요청하기

HTML 폼에서 PUT이랑 DELETE 요청은 일반적으로 불가능하다.

(GET, POST 만 가능. )

그래서 삭제 요청을 할 때에는 다음과 같은 3가지 방법을 사용한다.

1. method-override 라이브러리의 도움을 받는다
2. AJAX로 DELETE 요청을 날린다  -> REST한 API
3. 그냥 POST요청을 날려서 DELETE 작업을 수행한다 -> 제일 편함

---

AJAX 란?

프론트에서 js를 이용해서 서버에 여러 요청을 할 수 있는 문법같은것

!!새로고침 없어도 서버에 요청 가능(스무스한 사이트)

 

쌩js 쓰면 코드가 기니까 jQuery를 설치한다.

(부트스트랩 설치 할때에 jQuery를 CDN 방식으로 설치하는 부분이 있다. 

그부분을 이렇게 수정한다.)

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

이 코드를 위에 두고 그 아래부터 <script> 태그 열어서 작성하도록 한다.

 

아래는 list.ejs 파일이다.

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

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

<script>
  $('.delete').click(function(e){
    $.ajax({
      method : 'DELETE',
      url : '/delete',
      data : { _id : e.target.dataset.id }
    }).done((result)=>{
      $(this).parent('li').fadeOut();
    }).fail((xhr, textStatus, errorThrown)=>{
      console.log(xhr, textStatus, errorThrown);
    })
  });
</script>

AJAX로 DELETE 요청을 할 때에 보내는 data 를 클릭했을 때에 그 클릭한 데이터의 dataset.id 라고 했다.

dataset.id는 data-id 에 해당한다.

 

이제 delete 라는 클래스명을 가진 요소를 클릭하면(button  class='delete' 라고 해놨다) 

ajax 코드를 실행하게 된다.

 

AJAX 성공시에는 done 안에 있는 코드를 실행하고 

실패하면 fail 안에 있는 코드를 실행한다.

fail 시에는 xhr, 에러코드, 에러 메세지를 콘솔에 보여주도록 했음.

 

이 코드에서는 성공시에 부모 태그인 li 를 fadeOut으로 서서히 사라지게 해줬다.

 

(e.target = 지금 클릭한 것, this = 지금 이벤트 동작하는 곳)

 

 

아래는 server.js 파일이다.

app.delete("/delete", function (요청, 응답) {
  요청.body._id = parseInt(요청.body._id);
  db.collection("post").deleteOne(요청.body, function (에러, 결과) {
    console.log("삭제완료");
    응답.status(200).send({ message: "성공했습니다" });
  });
});

deleteOne을 쓰면 원하는 데이터를 삭제할 수 있는데

요청.body에는 아까 AJAX 요청할때 보냈던 data 가 들어올 것이다.

 

중간에 _id 값이 string이어서 이걸 int 형으로 바꿔주는 과정(parseInt)을 추가해주었다.

그리고 게시물 번호에 따라 post 라는 collection에서 deleteOne 으로 삭제를 해준다.

 

deleteOne( {어떤 항목을 삭제할지}, function(){})

 

+ 요청에 응답하는 방법은 여러가지가 있다. 아래를 참고하자

app.get('/어쩌구', function(요청, 응답){
  응답.send('<p>some html</p>')
  응답.status(404).send('Sorry, we cannot find that!')
  응답.sendFile('/uploads/logo.png')
  응답.render('list.ejs', { ejs에 보낼 데이터 })
  응답.json(제이슨데이터)
});

status 는 응답 코드를 보낼 수 있는데 위에 내가 만든 server.js에서는 성공의 의미인 200으로 응답코드를 보내줬다.