[MongoDB] Ajax로 mongodb atlas data 삭제하기

---

list.ejs 파일에 해당 코드 첨부

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

ajax로 서버에 delete요청을 할 때, 다음 형식으로 작성함

$.ajax({
        method: 'DELETE',
        url : '요청할 경로',
        data : '요쳥과 함께 보낼 데이터'
      })

끝에 

.done(function(result){

      });

를 붙여서 요청이 완료되면 수행할 기능을 작성함. 

$.ajax({
        method: 'DELETE',
        url : '/delete',
        data : {_id: 1}
      }).done(function(result){
      });

 

server.js 에서도 삭제버튼을 누르면(/delete) 어떤 기능을 수행할 것인지 정의해 줘야 한다.

app.delete('/delete', function(req,res){
    console.log(req.body)
    
})

post에서 _id가 1인 포스트를 삭제하는 기능은 deleteOne 메서드를 이용한다

db.collection('post').deleteOne(req.body,function(error,req){
        console.log('delete complete');
    })

server.js 에 delete를 다음과 같이 작성하면 된다.

app.delete('/delete', function(req,res){
    console.log(req.body);
    req.body._id = parseInt(req.body._id);
    db.collection('post').deleteOne(req.body,function(error,req){
        console.log('delete complete');
    });
});

id가 1인 data가 지워진 것을 확인 할 수 있다

여기서 문제가 발생하는데

list.ejs에 작성한 코드

$.ajax({
        method: 'DELETE',
        url : '/delete',
        data : {_id: 1}
      }).done(function(result){
      });

가 새로고침 할 때마다 id가 1인 data를 삭제하는 기능을 수행하게 된다.

우리가 구현할 기능은 삭제 버튼을 눌렀을 때 동작해야 하므로 수정해 주어야 할 필요가 있다. 

 

버튼항목에서가서 클래스를 추가하고, 

<button class="delete">삭제</button>

아래 스크립트에

$('.delete').click(function(){

      })

클래스가 delete인 것을 클릭하면 다음 문장을 수행하라 라는 의미

 

작성후 함수 안에 ajax 문장을 넣는다. 

$('.delete').click(function(){
        $.ajax({
          method: 'DELETE',
          url : '/delete',
          data : {_id: 1}
        }).done(function(result){
        });
      })

여기서 또 다른 문제가 있다.

id가 1로 고정이여서 삭제 버튼을 누르면 id가 1인 데이터만 지우게 된다.

우리가 원하는 것은 해당 post번호의 삭제버튼을 누르면 database에서 삭제를 해야한다.

 

앞에서 

server.js에서 리스트를 호출할 때 db에서 post의 정보를 불러와 변수로 저장했었다.

그리고 list.ejs에서 다음 코드를 통해서 불러왔다.

<h4>할일 제목: <%= posts[i].제목 %> </h4>
<p>할일 마감날짜: <%= posts[i].날짜 %> </p>

이와같이 각 post의 id를 불러오면된다.

<p>글번호: <%= posts[i]._id %></p>

그런데 이 글번호 라는 것이 웹 브라우저에 드러나게 된다.

이에 대한 데이터는 사용자는 알 필요가 없으므로 숨겨야 하는데

버튼에 data-id를 넣어서 해당 버튼의 id가 몇인지 지정해 주면 된다.

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

그리고 class로 delete로 지정하였는데 이는

list.ejs의 script태그 안에서 해당 기능에 대한 명령을 작성하면된다.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $('.delete').click(function(e){
        $.ajax({
          method: 'DELETE',
          url : '/delete',
          data : {_id: e.target.dataset.id}
        }).done(function(result){
        })
      });

맨 위에 Ajax를 사용하기 위해 선언하였고

delete 즉, 삭제 버튼을 클릭하면 삭제 기능을 수행하고

data의 _id: 는 해당 삭제버튼에 있는 post의 id를 지칭하는 의미이다.

 

코드를 잘 작성했다면 삭제 버튼을 클릭하면 해당 데이터베이스에서 삭제가 된 것을 확인 할 수 있다.

 

자바스크립트에서 삭제 동작이 성공하거나 실패했다고 출력하지 않기 때문에 사용자가 메세지를 출력하는 문장을 작성해야한다.

ajax에서 성공시 .done 실패시 .fail을 사용한다.

list.ejs에서

$('.delete').click(function(e){
        var postNumber = e.target.dataset.id;
        postNumber = parseInt(postNumber);
        var thisClick = $(this);
        $.ajax({
          method: 'DELETE',
          url : '/delete',
          data : {_id: postNumber}
        }).done(function(result){

        }).fail(function(result){

        })
      });

server.js에서 appl.delete에서 

res.status()항목을 추가하는데

이는 서버가 어떤 상태인지 알려주는 것이다

200이면 성공, 400이면 실패 등 여러 항목들이 있으니 참고하자

app.delete('/delete', function(req,res){
    console.log(req.body);
    req.body._id = parseInt(req.body._id);
    db.collection('post').deleteOne(req.body,function(error,req){
        console.log('delete complete');
        res.status(200).send({ message: '성공했습니다' });
    });
});

추가하고..다시 list.ejs로 돌아와서

.done(function(result){
          console.log('성공!')
          thisClick.parent('li').fadeOut();

을 추가하면 삭제 버튼을 누르면 자연스럽게 사라지는 것처럼 보인다.

thisClick.parent('li').fadeOut();

이 문장은 이 버튼을 클릭했을때 버튼의 부모 li를 자연스럽게 사라지게 하라 라는 의미이다. 

 

만약 응답을 400으로 설정한다면?

server.js

res.status(400).send({ message: '실패했습니다' });

에러를 출력한다.

추가적으로 fail부분에 왜 실패했는지 에러를 띄우고 싶으면, 다음 문장을 작성한다.

.fail(function(xhr, txstStatus, errorThrown){
          console.log(xhr, txstStatus, errorThrown);
        })