AJAX로 삭제요청하기

해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다.

 

1. 삭제 버튼 만들기 - list.ejs

<ul class="list-group">
  <% for (var i = 0; i < posts.length; i++){ %>
  <li class="list-group-item">
    <h4> 제목 : <%= posts[i].title %> </h4>
    <p> 마감일 : <%= posts[i].date %> </p>
    <button style="float: right;" class="delete">삭제</button> //삭제 버튼
  </li>
  <% } %>
</ul>

 

 

 

---

2. 삭제버튼 클릭 이벤트 리스너 만들기 - list.ejs

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

 

 

---

3. 이벤트 리스너 내부에 AJAX 사용해서 DELETE 요청 보내기 - list.ejs

💡 AJAX(Asynchronous JavaScript and XML)란?

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다.
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다
즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

 

 

Ajax를 사용하려면 jQuery를 설치해야한다. 아래의 코드를 body 하단에 작성해보자.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

 

 

이제 2번에서 만든 이벤트 리스너 내부에 Ajax를 사용해보자.

$('.delete').click(function(){
	$.ajax({
  		method: 요청할 메소드 입력(예를 들면 GET/POST/DELETE 등등),
  		url: 요청할 경로,
  		data: 
		}).done(function (result) {
			//성공시 실행 할 코드
		}).fail(function (error) {
			//실패시 실행 할 코드
	});
})

 

 

이제 위의 기본틀을 기반으로 우리가 직접 코드를 입력해보자.

$('.delete').click(function(){
	$.ajax({
  		method: 'DELETE,
  		url: /delete,
  		data: '삭제 버튼을 누른 셀의 게시물의 아이디'
		}).done(function (result) {
			//성공시 실행 할 코드
		}).fail(function (error) {
			//실패시 실행 할 코드
	});
})

 

삭제 버튼을 누른 셀의 게시물의 아이디를 알 수 있는 방법은 sever.js를 작성하고 알아보자.

 

 

---

4. 서버에서 ajax로 요청된 경로일 때 삭제하도록 만들기 - server.js

서버에서는 아래와 같은 상황에서 삭제하도록 만들어야한다.

어떤 사람이 /delete 경로로 DELETE 요청을 하면 게시물을 삭제해주세요!

 

 

app.delete('/delete', function(request, response){
	//게시물 삭제 요청
});

 

 

게시물 삭제 요청은 어떻게 해야할까?

우선 3번에서 data 값으로 보낸 값이 request로 온다는 것을 기억해야한다.

그후 우리는 deleteOne이라는 함수를 사용해서 데이터를 삭제하려고 한다.

//deleteOne 기본형식
db.collection('콜렉션 이름').deleteOne( 삭제하려는 데이터, function(error, result){

})

 

 

이제 위의 기본틀을 기반으로 우리가 직접 코드를 입력해보자.

db.collection('post').deleteOne( request.body, function(error, result){
    console.log('delete complete!');
})

//post라는 콜렉션에서 request.body로 넘어온 데이터를 삭제한다.

 

 

이제 위의 코드들을 합쳐본다면 아래와 같다.

app.delete('/delete', function(request, response){
    request.body._id = parseInt(request.body._id)
    db.collection('post').deleteOne( request.body, function(error, result){
        console.log('delete complete!');
    })
})


// 1. 누군가 /delete라는 경로로 삭제 요청을 하면 아래의 결과가 실행된다.
// 2. reques.body._id 값을 int로 변경한다.
// 3. post 콜렉션에서 request.body에 있는 값을 찾아서 삭제한다.

 

🚨 2번코드가 작성된 이유?? 🚨

이 코드가 있는 이유는 AJAX요청 등으로 데이터를 서버에 전송할 떄 숫자 자료들이 가끔 문자화 되는 경우가 있기 때문이다.

 

 

---

5. 삭제 버튼을 누른 셀의 게시물의 아이디를 알아내기 - list.ejs

알아내기 전에 우리는 data-set이라는 것을 알아야한다. 모른다면 이 글을 읽고 오자.

 

 

누른 버튼을 파악하기 위해서는 해당 셀에 각각의 id가 부여되어야한다. 이 id를 부여하는 것을 우리는 data-set으로 진행하려고 한다.

따라서 html이 만들어짐에 따라 게시물의 아이디를 data-set id로 넣어주면 된다.

<ul class="list-group">
  <% for (var i = 0; i < posts.length; i++){ %>
  <li class="list-group-item">
    <h4> 제목 : <%= posts[i].title %> </h4>
    <p> 마감일 : <%= posts[i].date %> </p>
    <button style="float: right;" class="delete" data-id="<%= posts[i]._id %>">삭제</button> //data-set 활용
  </li>
  <% } %>
</ul>

 

 

 

이제 id를 모두 부여했으니 우리가 삭제 버튼을 클릭했을 때 해당 셀의 id를 가져오면 된다. 

해당 기능은 e.target을 통해서 진행해보려고한다. 아래와 같이 코드를 작성하면 e.target을 통해서 id를 가져올 수 있다. 

 

$('.delete').click(function(e){
  $.ajax({
    method: 'DELETE',
    url: '/delete',
    data: { _id: e.target.dataset.id} //e.target.dataset.id: 현재 클릭한 셀의 id를 가져온다.
  }).done(function (result) {

  }).fail(function (error) {

  });

  location.reload(); //ajax는 새로고침 없이 서버와의 통신이 일어나기 때문에 새로고침을 통해서 HTML를 업데이트 해준다.
})

 

---

 

[실행 화면]