[Node.js] AJAX로 삭제 요청하기

- HTML에서 DELETE 요청은 불가능

 

해결방법

1. method-override 라이브러리 이용
2. JavaScript AJAX 이용

*AJAX란? - 새로고침 없이 서버에서 요청하는 것을 도와주는 JS문법

 

 

<list.ejs>

<!-- ejs에서 변수 담기  -->
<!-- <%= %> -->

<!-- 서버에서 가져온 투두리스트 -->
<h4 class="ml-2 my-3">서버에서 가져온 투두리스트</h4>
<ul class="list-group">
    <% for (var 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>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>

<script>
    $('.delete').click(function (e) {
        var 글번호 = e.target.dataset.id;
        var 지금클릭한글 = $(this);

        $.ajax({
            method: 'DELETE',
            url: '/delete',
            data: { _id: 글번호 },
        })
            .done(function (결과) {
                console.log('성공!');
                지금클릭한글.parent('li').fadeOut();
            })
            .fail(function (xhr, textStatus, errorThrown) {
                // , 에러코드, 에러메시지
                console.log('실패!');
                console.log(xhr, textStatus, errorThrown);
            });
    });
</script>

 

<server.js>

/* DB에서 데이터 삭제하기 */
app.delete('/delete', function (요청, 응답) {
    console.log(요청.body); // 요청시 함께 보낸 데이터를 찾기(게시글 번호)
    요청.body._id = parseInt(요청.body._id); // 문자가 된 id값을 다시 숫자로 변환

    // db.collection('post').deleteOne({삭제할 항목}, function(){
    db.collection('post').deleteOne(요청.body, function (에러, 결과) {
        console.log('삭제완료');
        응답.status(200).send({ message: '성공' });
    });
});