AJAX로 서버에 DELETE 요청하는법, 요청에 응답하는 여러가지 방법

서버에 해당 글 삭제 요청을 하기위한 delete기능. html에서는 불가능하다. 

form의 method는 GET 과 POST만 가능하기때문에 어떻게 구현하면 좋을까나

 

1. method-override 라이브러리 이용(node.js)
2. JavaScript AJAX 이용

 

jQuery라이브러리로 2번 방법을 써보자.

AJAX란 ? 새로고침 없이 서버랑 통신할 수 있게 도와주는 JS문법.

 

제이쿼리 cdn먼저 복붙하고... ajax 기본문법.

// list.ejs

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

<script>
    $.ajax({
        method : 'DELETE',
        url : '경로',
        data : '보낼 데이터'
    }).done(function(result){

    });
</script>

 

 

원하는 기능은 게시물에 맞는 삭제버튼을 누를 때 해당 게시물을 삭제하는 기능이기 때문에,

button태그에 data-id 속성으로 id값을 부여해준다.

 // list.ejs
 
 	<ul class="list-group">
        <% for(let i=0; i < posts.length; i++){ %>
            <li class="list-group-item" >
                <h4>
                    <%= posts[i]._id%>. 할일 제목 : <%= posts[i].title %>
                </h4>
                <p>
                    할일 마감 날짜 : <%= posts[i].date %>
                </p>
                <button class="delete" data-id=<%= posts[i]._id %>>삭제</button>
            </li>
            <% } %>
    </ul>

 

 

그리고 삭제버튼을 버튼을 누르면 타겟의 dataset.id 속성을 보낼데이터에 담아서 ajax 전송.

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

            // 클릭한 버튼의 id 파악
            var id = e.target.dataset.id;
            
            $.ajax({
                method: 'DELETE',
                url: '/delete',
                data: { _id:  id }
            }).done(function (result) {

                // 페이지를 강제로 새로고침 해주세요 or 삭제버튼을 누른 li 요소 제거
                
            });
        });

 

 

이제 server.js가서 delete 요청 왔을 때 처리할 코드를 짜야죠.

app.delete('/delete', function(req, res){
    console.log(req.body);
    
    var id = parseInt(req.body._id);

    // req.body에 담겨온 게시물 번호를 가진 글을 db에서 찾아 삭제하자.
    db.collection('post').deleteOne( { _id : id }, function(err, result){
        if(err) console.log(err);
        else { console.log('삭제 완료'); }
    });
});

중간에 db에있는 id와 자료형을 맞춰주기위해 parseInt로 구현.

데이터 삭제는 deleteOne({}, 콜백함수)

---

삭제완료는 잘 된다. 하지만 화면상 새로고침을해야 확인가능.

이 부분은 서버 요청 성공 시 새로고침을 하거나 삭제버튼을 누른 li 요소를 제거/안보이게하는 코드를 짜주면됨.

여기서는 제이쿼리함수 fadeOut()으로 화면에서 없애보았따.

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

            // 클릭한 버튼의 id 파악
            var id = e.target.dataset.id;
            var current = $(this);   // = 누른 delete button

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

                // 페이지를 강제로 새로고침 해주세요 or
                //삭제버튼을 누른 li 요소 제거/안보이게
                current.parent('li').fadeOut();

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

 

 

대신 서버에서 요청이 성공했다는 응답을 해줘야 done이 실행된다.

res.status(200).send({ message : '요청성공' }); 코드 추가.

app.delete('/delete', function(req, res){
    console.log(req.body);
    
    var id = parseInt(req.body._id);

    // req.body에 담겨온 게시물 번호를 가진 글을 db에서 찾아 삭제하자.
    db.collection('post').deleteOne( { _id : id }, function(err, result){
        if(err) {
            res.status(400).send({ message : '실패했습니다.' }); 
        } else { 
            //응답코드 200을 불러주세요. 200 : 요청성공, 400 : 요청실패
            // 서버에 메세지 보내기.
            res.status(200).send({ message : '성공했습니다.' }); 
            console.log('삭제 완료'); 
        }
    });
});

---

요청에 응답하는 방법은 여러가지가 있다.

status는 응답코드를 보낼 수 있고.. sendFile은 static 파일들 보내기.

render는 ejs등의 템플릿이 적용된 페이지를 렌더링해주는 기능.

    app.get('/url', function(req, res){
        res.send('<p>some html</p>');
        res.status(404).send('Sorry, we cannot find that');
        res.sendFile('/uploads/logo.png');
        res.render('list.ejs', { ejs에 보낼 데이터 });
        res.json(제이슨 데이터);
    });