Ajax를 이용한 데이터 삭제

# ajax 기본 구조

<script>
  $.ajax({
    method : 'DELETE',   --> 이걸 요청한다
    url : '/delete',     --> 이 페이지로
    data : 1             --> 이 데이터를
  }).done(function(result){
  	 성공시 여기있는 코드 실행	 
  });
</script>

 

# 삭제코드 server.js

//삭제
app.delete('/delete', function(request , response){
    request.body._id = parseInt(request.body._id);
    db.collection('post').deleteOne(request.body, function(err, result){

        response.status(200).send({ message :'성공했습니다'}); //success

    });
});

 

# 화면단 list.ejs

<h2 class="ml-2 my-3">할일목록</h2>
  
        <div class="container">
            <ul class="list-group">
                
                <!-- <li class="list-group-item active" aria-current="true">An active item</li> -->
                <% for (let i=0; i < posts.length; i ++) { %>
                <li class="list-group-item">
                    <p>글번호 : <%= posts[i]._id %></p>
                    <h4>
                        <%= posts[i].title %>
                    </h4>
                    <p>
                        <%= posts[i].date %>
                    </p>
                    <button class="delete"  data-id="<%= posts[i]._id %>">삭제</button>
                </li>
                <% } %>

            </ul>
        </div>

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

            $('.delete').click(function (e) {
                var postId = e.target.dataset.id;
                var currentPost = $(this); 
                $.ajax({
                    method:'DELETE',
                    url: '/delete',
                    data :{_id:postId}
                    }).done(function(result){
                        currentPost.parent('li').fadeOut();
                        console.log(result.message);
                    }).fail(function(xhr,textStatus,errorThrown){
                        //실패시
                       console.log(xhr,textStatus,errorThrown);
                    });
            })

           
        </script>