Delete요청 하는법
1.method-override 라이브러리 이용
2.Ajax이용
우리는 Ajax를 사용해서 해볼것임.
->Ajax는 서버와 통신할 수 있게 도와주는 JS문법(새로고침없이!)
->jQuery를 사용할거임
jquery cdn 검색해서 slim없는 걸로 가져오기.
script
$.ajax({
method: 'DELETE',
url: '/delete',
data: '게시물번호'
}).done(function(result){})
/script
->/delete경로로 DELETE를 수행해줘(게시물번호 data를 가지고~)app.delete('/delete', function (request, response) {
console.log(request.body)
})
->서버에 작성
$.ajax({
method: 'DELETE',
url: '/delete',
data: { _id: 1 }
}).done(function (result) {
})
이렇게 작성
app.delete('/delete', function (request, response) {
db.collection('post').deleteOne(request.body, function (error, result) {
})})
이러면 게시물번호 id 1을 가져온걸 가지고 삭제를 함.
->주의할점 요청으로는 '1'이라고 넘어올거다.
이러면 숫자가 아니기때문에 실제로 id가 삭제가 안될거임.
request.body._id = parseInt(request.body._id);
->숫자 형식으로 변환 해줘야됨.
-> 근데 이거까지해서 삭제되긴되는데, 새로고침 할때마다 계속 index 1인걸 삭제함.
$('#delete').click(function () {
$.ajax({
method: 'DELETE',
url: '/delete',
data: { _id: 1 }
}).done(function (result) {
})
})
->jQuery문법을 사용하여 (button에 id='delete'로 미리 지정해두었음)
버튼을 클릭하면 삭제요청을 보내주는 것으로 바꾸면 됨.
->근데 또 버튼마다 다른 인덱스를 삭제하게 해주어야됨.
1 버튼마다 번호달기
<% for(var i=0; i < posts.length; i++) { %>
<li class="list-group-item">
<p>
글번호 : <%= posts[i]._id %>
</p>
<h4>
할일 제목 : <%= posts[i].제목 %>
</h4>
<p>
할일 마감 날짜 : <%= posts[i].날짜 %>
</p>
<button type="button" class="delete" data-id="<%= posts[i]._id %>">삭제</button>
</li>
<% } %>
data-id는 보이지않는곳에 id값을 정해줄 수 있게 해주는 요소임.
글번호 역할 같은거임(근데 안보이는거지)
->이제 이거를 가져와서
$('.delete').click(function (e) {
var number = e.target.dataset.id;
$.ajax({
method: 'DELETE',
url: '/delete',
data: { _id: }
}).done(function (result) {
})
})
저기 data값에 넣을건데, 그러려면 저 function옆의 e랑
e.target이 필요함
->e.target은 내가 지금 누른(선택한)걸 뜻하는거고,
dataset.id는 data-id의 저장된 값을 가져오라는 거임
그러면 저 var number를 _id : number 이렇게 넣으면 되는거임.
이제 다하고 확인해보면 삭제는 되는데(데이터에서는 삭제됨)
페이지에서는 반응이없음(당연히 ajax는 새로고침안하니께)
