이번에는 AJAX를 사용해서 삭제요청을 해보겠습니다.
요청은 GET POST PUT DELETE 4종류가 있는데,
html폼에서 일반적으로 PUT DELETE요청이 할 수 없다.
그래서 삭제요청시 사용할수 있는 방법은
1. method-override 라이브러리로 하기
2. AJAX로 DELETE 요청 보내기
3. 걍 POST요청으로 DELETE 작업하기
3번이 가장 편하지만, 저러면 REST하지 않아서 1, 2번을 사용하자.
AJAX란?
프론트에서 js를 이용해 여러 요청을 할 수 있는 문법같은 것인데,
장점은 새로고침없이 서버에 요청이 가능해서 부드러운 사이트를 만들때 ajax로 처리하게된다. 이거로 삭제버튼 누르면 새로고침없이 삭제가 가능하다.
AJAX를 위한 jQuery설치
걍 html이나 ejs파일 아무데나 이거 넣어주면 됨
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>AJAX 기본 문법
(list.ejs 하단)
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$.ajax({
method : 'POST',
url : '/add',
data : '결혼하기'
})
</script>/add경로로 Post 요청할건데 요청이랑 같이 '결혼하기'란 데이터를 보내란 뜻의 코드이다.
그럼 서버는 알아서 요청을 처리하고, 이 코드는 script태그 안에 그대로 넣으면 방문할 때 마다 실행한다.
여기서 우리는 삭제요청을 보내야하니까 다르게 해보면?
<script>
$.ajax({
method : 'DELETE',
url : '/delete',
data : { _id : 1 }
}).done(function(결과){
// AJAX 성공시 실행할 코드
}).fail(function(에러){
// 실패시 실행할 코드
});
</script>위처럼 사용한된다. 뭐 뭔뜻인지는 보면 안다.
server에서 삭제요청 처리하기
위에서는 html이나 ejs에서 ajax를 이용해 서버에 요청을 보내는 거였고, 이제 서버에서 할 일은 그 요청을 받아서 디비삭제작업을 하면된다.
//(server.js)
app.delete('/delete', function(req, res){
req.body._id = parseInt(req.body._id)
db.collection('post').deleteOne(req.body, function(err, result){
console.log('삭제완료')
})
res.send('삭제완료')
});post나 get할때랑 매우 유사하게 할 수 있다.
근데 이렇게 하면 페이지가 새로고침 될 때마다 계속 삭제되니까 버튼을 눌렀을 때만 실행해보자.
버튼을 눌렀을 때만 요청
삭제할 게시물에 삭제 버튼을 대충 알아서 넣어보자
난 부트스트랩에서 가져와서 클래스명은 'btn-close'다
<button
type="button"
class="btn-close"
aria-label="Close"
data-id="<%= posts[i]._id %>"></button>뭐 대충 이런식으로 추가했는데 여기 중요한건 data-id라는 데이터를 이 버튼을 누를때마다 지금 누른 친구의 id를 보내준다.
위에서 쓴 스크립트코드 부분을 다시 가서 이렇게 고치면 상당히 이지하다.
<script>
$('.btn-close').click(function(){
$.ajax({
method : 'DELETE',
url : '/delete',
data : { _id : e.target.dataset.id }
}).done(function(result){
//AJAX 성공시 실행할 코드
})
});
</script>'btn-close'라는 클래스명을 가진 친구를 클릭할 때만 ajax코드를 실행하란 뜻이다.
그리고 data : { _id : e.target.dataset.id }는 지금 누른 친구가 보낸 요소에 id를 보내주는 처리를 해준다.
