#ajax #버튼 #삭제 #fadeOut # node

삭제 요청하기 

-  form 메소드에서는 get, post 만 가능 삭제는 어떻게..?

1. method-override 라이브러리 이용

2. JavaScript AJAX 이용 

*AJAX 란? — LLAT (tistory.com)

 

기초

ajax 를 사용해 delete 요청 보내는 방법 

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $.ajax({
        method: 'delete',
        url: '/delete',
        // 게시물 번호를 담아서 삭제 요청을 보내면 그 게시글을 삭제할거임
        data: {_id : 1}

      }).done((result) => {
        // 요청이 성공하면 실행할 코드 
      }).fail((error) => {
        // 실패 했을 때 코드 
      })
    </script>

 

서버에서 AJAX 삭제 요청 받아서 수행하는 방법

(아래 방법은 그냥 새로고침 할 떄마다 삭제됨, 아이디가 1인게 )

app.delete('/delete', (req, res) => {
  // 요청시 함께 보낸 데이터를 찾고 싶다 
  // 요청이 게시물 번호였으므로 게시물 번호 나옴
  console.log(req.body);  

  // 주의! 나는 분명 int 형 으로 보냈으나 수신은 string 형으로 된다 = 삭제안됨
  // int 형으로 변환 시켜주기 
  req.body._id = parseInt(req.body._id)

  // deleteOne
  db.collection('post').deleteOne(req.body, (err, result) => {
    console.log('삭제완료');
  })
})

-- req.body == {_id : '1' } 즉 int 가 아닌 string 형이 나온다.. 삭제가 안된다 => parseInt 로 변환해줘야 함 

 

- deleteOne ( {어떤 항목을 삭제할지} ,function(){요청 성공했을때 실행될 함수} )

 

ajax 수정, 버튼 클릭시마다 삭제 되도록

<button class="delete" data-id="<%= postList[i]._id %>">삭제</button>

1. ajax 수정

 <script>
      $('.delete').click(function(e){
        $.ajax({
          method : 'DELETE',
          url : '/delete',
          // 게시물 번호를 담아서 삭제 요청 =  버튼의 data-id 를 넣으면 됨 
          data : { _id : e.target.dataset.id }
        }).done((success)=>{
          // 요청이 성공하면 실행할 코드
          $(this).parent('li').fadeOut(); // $(this)지금 이벤트 동작하는 곳
        }).fail((error) => {
          // 실패 했을 때 코드 
        })
      });
    </script>

- 클릭이벤트 부여

- 버튼 id 값 가져오기 

<button class="delete" data-id="<%= postList[i]._id %>">삭제</button>

2. db 에 응답코드 넣어주기

db.collection('post').deleteOne(req.body, (err, result) => {
    console.log('삭제완료');
    res.status(200).send({ message : '성공했음'}); // 응답코드 성공
  })