ajax로 삭제요청

삭제를 할 때 DELETE요청을 하면 된다. form태그의 method="post"를 delete로 바꾸면 되지 않을까 생각할 수 있지만, html상에서 delete요청을 할 순 없다. 

그래서, 2가지 방법이 있다.

1. method-override라이브러리를 사용하거나

2. js ajax를 이용하거나

2번을 이용해서 delete를 해보자.

 

Ajax의 가장 큰 장점은 새로고침 없이 서버에 요청하는걸 도와준다.

<h4 class="ml-2 my-3">서버에서 가져온 할일 리스트</h4>

    <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="btn btn-primary">삭제</button>
        </li>
      <% } %>
    </ul>

먼저, list를 이쁘게 만들어주고

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

제이쿼리cdn을 먼저 써주고, 아래에 script태그를 만들어 위처럼 입력해준다.

"서버에 새로고침없이 요청할 경로로 데이터를 가지고 DELETE요청을 할거에요"라는 뜻이다.

$.ajax({
        method : 'DELETE',
        url : '/delete',
        data : '게시물번호'
      }).done(function(결과){

})

data에 게시물번호를 적어주면 게시물번호를 함께 보낸단 뜻이고,

server.js에

app.delete('/delete', function(요청,응답){
    console.log(요청.body);
})

이렇게, /delete로 접속하면, 콜백함수를 달아주고 요청.body를 적어주면 위의 게시물번호가 찾아진다.

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

      })

app.delete('/delete', function(요청,응답){
    console.log(요청.body);
    //우리가 보낸 id는 문자로 나오고 mongoDB의 id는 숫자이기 때문에 변환과정 필요
    요청.body._id = parseInt(요청.body._id);
    //요청.body에 담긴 게시물번호에 따라 DB에서 게시물삭제
    db.collection('post').deleteOne(요청.body, function(에러, 결과){//삭제해주는 함수
        console.log('삭제완료');
    })
})

data로 _id를 보내주고, app.delete를 이용해 /delete로 접속하면 자료형을 숫자로 맞춰주고 deleteOne함수를 이용해서 요청.body(_id : 1)을 지워주게 된다.

 

ajax로 써주면 새로고침할 때마다 계속 실행하므로 삭제라는 버튼을 만들어서

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

delete라는 class를 주고 클릭시 반응하게 만들어준다. 이제 ajax시 보내는 data의 _id만 상황에 맞게 가면 된다.

즉, X번 버튼을 누르면 X번 게시물이 삭제되어야 한다. X번 게시물의 _id값이 오면 된다.

먼저, 글번호를 만들어준다.

<p>글번호 : <%= posts[i]._id %></p>
<h4>할일 제목 : <%= posts[i].제목 %></h4>
<p>할일 마감날짜 : <%= posts[i].날짜 %></p>
<button class="btn btn-primary delete" data-id="<%= posts[i]._id %>">삭제</button>

글번호를 만들고, 버튼에 data-id를 이용해 보이지 않는 아이디를 저장해준다. 그러고

var 글번호 = e.target.dataset.id;

delete버튼을 클릭하면, 글번호라는 변수를 만들고, e.target (현재클릭한요소의).dataset.id (data-id값)을 담아준다. 그리고

data : {_id : 글번호 }

ajax로 전송할 data에 _id : 글번호 를 적어주면 된다. 

여기까지하면 게시물 삭제버튼을 누르고 MongDB에서 새로고침 후, 다시 홈페이지에서 새로고침을 누르면 삭제된 것을 볼 수 있다.

.done(function(결과){
            //페이지를 강제로 새로고침해주세요
            //삭제버튼을 누른 li요소를 제거해주세요
});

그래서 ajax가 성공하면 (done 함수) 위의 내용을 실행하게하면 버그를 제거할 수 있다.

db.collection('post').deleteOne(요청.body, function(에러, 결과){//삭제해주는 함수
        console.log('삭제완료');
        응답.status(200).send( {message : '성공했습니다'} ) //응답코드 200을 보내주고 메세지도보내주셈
// 200은 성공했다는 뜻 400은 고객잘못으로 요청실패라는 뜻 500은 서버문제로 요청실패라는 뜻
//서버가 꼭 뭔가 응답해줘야 ajax가 잘 작동함
 })

위처럼 server.js에 작성을 해서 서버에서 어떤걸 응답할지 정해줄 수 있는데, 

응답.status()라 적어서 안에 코드를 입력하면 된다. 200,400,500등 여러가지가 있고 지금은 200을 써서 무조건 성공하게 해주세요 라고 쓴다. 그리고 .send를 써서 메시지도 보내준다 send('성공했습니다')이렇게 오브젝트로 안써도 괜찮지만, 메시지가 여러개면 오브젝트형태로 작성해준다.

$('.delete').click(function(e) {
          var 글번호 = e.target.dataset.id;
          var 지금누른거 = $(this);//제이쿼리의 this는 현재 이벤트가 동작하는 것을 뜻함

          $.ajax({
            method : 'DELETE',
            url : '/delete',
            data : {_id : 글번호 }
          }).done(function(결과){
          //성공했는지 실패했는지 알려줘야함 즉, 서버에서 응답을 해줘야 done을 실행시킨다.
            
            console.log('성공했어염');
            //페이지를 강제로 새로고침해주세요
            // location.reload();
            //삭제버튼을 누른 li요소를 제거해주세요
            지금누른거.parent('li').fadeOut();
            //.parent()는 ~의 부모태그를 찾아주세요 여기선 li찾음

          }).fail(function(xhr, textStatus, errorThrown){

            console.log(xhr, textStatus, errorThrown)
            //textStatus응답코드임 왜 실패했는지 나옴
            //errorThrown에러메시지임 
          })
      })

이제 list.ejs에서 지금누른거 라는 변수를 $(this)로 만들어준다. this는 현재 이벤트를 의미하며,

ajax의 done에 지금누른거.parent('li')를 작성해서 삭제버튼의 부모인 li태그를 찾아서 fadeOut 처리를 해준다. 

 

만약, 실패했을때도 작성할 수 있는데, 위처럼 함수와 파라미터를 적어주면 된다.