(7)AJAX를 이용해 삭제요청 하기

요청은 4개 종류가 있음 GET ,POST, PUT ,DELETE

하지만 HTML 폼에서 일반적으로 PUT DELETE 요청을 할 수는 없습니다. 일반적인 HTML 폼 안에선 GET, POST 요청밖에 못날립니다. 

그래서 우리는 AJAX로 DELETE 요청해 삭제를 해보도록 할것.

 

AJAX 는 무엇인가?

프론트엔드에서 JavaScript를 이용해 서버에 여러가지 요청을 할 수 있는 문법 같은 것입니다.

장점은 새로고침 없이도 서버에요청을 할 수 있습니다. 

그래서 새로고침이 없는 스무스한 사이트를 만들고 싶으면 많은 요청을 AJAX 문법을 이용해 처리하게 됩니다. 

그래서 이걸 써서 개발하면 삭제 버튼을 누르는 순간 새로고침 없이도 글 삭제가 가능합니다. 

 

AJAX를 쓰기 위한 jQuery 설치

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

❗jQuery 설치 파일보다 하단에 script 태그를 열어서 작성하셔야 잘 작동됩니다. ❗

 

AJAX 기본 문법

(list.ejs 하단)

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

<script>
  $.ajax({
    method : 'DELETE',
    url : '/delete',
    data : '1번게시물'
  }).done(function(결과){
    AJAX 성공시 실행할 코드는 여기
  }).fail(function(에러){
    실패시 실행할 코드는 여기
  });
</script>

=>/add 경로로 POST 요청을 하는데 요청과 함께 '1번게시물' 이라는 데이터를 보내주세요~ 라고 썼습니다.

이 코드는 Script 태그 안에 그대로 넣으면 list.ejs 페이지를 방문할 때 마다 바로 실행됩니다. 

 

1. _id :1 인 게시물 삭제하기.

원하는 게시물을 삭제하고 싶으면 AJAX요청을 할 때

삭제 원하는 게시물 번호를 보내야함

(게시물 번호는 _id : 1 뭐 이런식으로 DB에 저장해놨음)

=>AJAX요청 등으로 데이터를 서버에 전송할 때 숫자 자료들이 가끔 문자화 되는 경우가 있습니다.

그래서이걸 다시 숫자로 바꿔주셔야합니다.

parseInt라는 함수는 '1' 이런걸 정수 1로 바꿔주는 고마운 함수입니다.

그리고 실행해보시면 (/list 페이지를 새로고침해서 AJAX 요청해보시면)

{_id : 1} 인 데이터가 삭제가 되어있음을 확인할 수 있습니다.

 

2.버튼을 눌렀을 때만 AJAX 요청 해보기.

1. <button>태그에 class를 추가했고

2. $.ajax 코드를 이상한 코드로 감쌌습니다. 

이상한 코드의 뜻은.. delete라는 클래스명을 가진 요소를 클릭하면 내부 $.ajax(~) 코드를 실행해주세요~ 입니다. (jQuery 문법입니다.)

그래서 이제 delete라는 클래스명을 가진 버튼을 클릭할 때만 ajax를 실행시켜주네요!

 

3._id가 1인 버튼 누르면 1번 게시물이 ._id가 2인 버튼 누르면 2번 게시물이 삭제되도록 만들기

1.posts[i]._id 라는 게시글의 번호를 EJS문법을 이용해 집어넣음.

2. 자바스크립트로 버튼에 숨겨져있는 data-id="1" 이라는 정보를 가져올 수 있습

3.e.target 이라는 코드는 현재 지금 클릭한 요소를 뜻합니다

 

즉 

2번글 버튼을 누르면 data : { _id : 2 } 라고 채워지게되는 것입니다.

3번글 버튼을 누르면 data : { _id : 3 } 이라고 채워지게되는 것입니다.

 

4.jQuery를 이용해 UI 기능

삭제버튼을 누르면 HTML화면은 변동이 없고 DB데이터만 지우고 있습니다.

(AJAX는 새로고침 없이 몰래 요청을 처리해주니깐요)

그럼 유저들이 삭제 된지 안된건지 모르겠죠?

그러니 삭제 AJAX 성공시 해당 게시물의 <li>태그를 지워보도록 합시다. 

1. $(this) 라는 단어는 현재 클릭이벤트가 동작하는 곳입니다.  $(e.target)으로 대체 가능합니다. (지금 누른것)

하지만 e.target이나 this 같은 키워드 뒤에 jQuery 함수를 붙이고 싶다면 $() 안에 싸매셔야합니다. 

2. parent('li')는 부모 HTML 중 li태그를 찾아주세요~ 

3. fadeOut()은 사라지게 해주세요~ 

4. 근데 done() 안에 function(){} 말고 ()=>{} 이런 함수로 바꿔봤습니다. 그래야 this값의 변형없이 잘됩니다.

입니다.

 

 

<고객 요청에 응답하는 방법>

app.get('/어쩌구', function(요청, 응답){
  응답.send('<p>some html</p>')
  응답.status(404).send('Sorry, we cannot find that!')
  응답.sendFile('/uploads/logo.png')
  응답.render('list.ejs', { ejs에 보낼 데이터 })
  응답.json(제이슨데이터)
});

=>send는 간단한 문자나 HTML을 보낼 수 있습니다.

status는 응답코드를 보낼 수 있습니다. 

sendFile은 static 파일들을 보낼 수 있습니다. 

render는 ejs등의 템플릿이 적용된 페이지들을 렌더링해줄 수 있습니다. 

json은 제이슨 데이터를 담아보낼 수 있습니다.