<ul class="list-group">
<!-- 서버에서 가져온 할 일 리스트 -->
<!-- posts에 들어있는 데이터 갯수만큼 h4 여러개 생성(반복문) -->
<% 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>
<!-- DELETE요청하는 법
1. method-overrid 라이브러리 이용
2. JavaScript AJAX를 이용 -->
<button type="button" class="btn btn-outline-secondary" class="delete" data-id="<%= posts[i]._id %>">삭제</button>
<% } %>
<!-- AJAX 서버랑 통신할 수 있게 도와주는 JS문법
- 새로고침 없이도 서버랑 통신이 가능 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 1. 버튼마다 번호달기
2. 클릭한 버튼의 id를 파악 -->
<script>
$('.delete').click(function (e) {
var 글번호 = e.target.dataset.id;
// jQuery 라이브러리 도움을 받은 AJAX요청
$.ajax({
method: 'DELETE',
url: '/delete',
data: { _id: 글번호 }
// .done은 AJAX 요청이 성공했을때 실행해달라고 하는 것
}).done(function (result) {
});
});
app.delete('/delete', (req, res) => {
// console.log(req.body);
req.body._id = parseInt(req.body._id); // req.body 내의 _id를 숫자로 변환시키기
// req.body에 담겨온 게시물번호를 가진 글을 db에서 찾아서 삭제해주세요
db.collection('post').deleteOne(req.body, (err, result) => {
console.log('삭제완료');
});
res.send('삭제완료');
});
처음 코드를 작성할 때는 삭제 완료가 떴었는데 오류는 안나지만 콘솔에 출력도 안됩니다..
