#19 AJAX로 삭제하기3(jQuery를 이용한 UI 기능) & HTTP 응답

출처 : https://www.steveschoger.com/status-code-poster/

---

● 서버가 요청에 응답하는 방법

- 서버가 사용자의 요청에 응답하는 방법은 여러가지가 있다.

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

- send : 간단한 텍스트나 HTML을 보낼 수 있다.
- status : 응답 코드를 보낼 수 있다.
- sendFile : static 파일(정적파일)을 보낼 수 있다.
- render : ejs 등의 템플릿이 적용된 페이지들을 렌더링 해줄 수 있다.
- json : JSON 데이터를 담아보낼 수 있다.

- status function에서 볼 수 있듯이 HTTP 응답 코드를 이용해 요청이 성공 or 실패했는지 판정해줄 수 있다.
- (서버 에러는 500, 이상한 요청은 400)과 같이 두루뭉술하게 적어보내도 되지만 응답 코드를 정확히 적으면 테스트할 때 어떤 문제인지 더 쉽게 파악이 가능하다.

---

● AJAX 요청 성공 or 실패시 특정 코드 실행

- 데이터가 오거나 200 코드가 오면 성공, 데이터가 안오거나 400, 500 코드가 오면 실패
- 성공 or 실패시 각각의 기능을 실행하려면 done 혹은 fail 함수를 사용하면 된다.
- 성공 or 실패 각각의 경우에 따라서 적절한 안내문을 띄워주는 등 UI도 만들 수 있다.

(list.ejs)
<script>
  $('.delete').click(function(e){
    $.ajax({
      method : 'DELETE',
      url : '/delete',
      data : { _id : e.target.dataset.id }
    }).done((result) => {
      // AJAX 성공시 실행할 코드
    }).fail((xhr, code, err) => {
      // AJAX 실패시 실행할 코드
    });
  });
</script>

- done function의 1개 파라미터는 요청시 받아온 결과가 담겨있다.(파일, 데이터 등)
- fail function의 3개 파라미터는 차례대로 jQuery의 (XMLHttpRequest, 에러코드, 에러메세지)이다.

---

● 삭제 성공시 HTML 조작 by jQuery

- 현재는 삭제 버튼을 누르면 HTML 화면은 변경이 없고 DB 데이터만 지우고 있다.
- 이러면 사용자가 제대로 삭제된건지 아닌지 모르므로 삭제 성공시 <li> 태그를 지워주는 기능을 새로 만들어보자

(list.ejs)
<script>
    $('.delete').click(function(event) {
        $.ajax({
            method : 'DELETE',
            url : '/delete',
            data : {
                _id : event.target.dataset.id
            }
        })
        .done((result) => {
            // 지금 클릭한 곳(이벤트가 동작하는 곳)의 부모(상위요소) 중에 <li> 태그가 있으면 사라지게 해라
            $(this).parent('li').fadeOut();
            console.log(result);            
        })
        .fail((xhr, code, err) => {
            console.log(xhr);
            console.log(code);
            console.log(err);
        });
    });
</script>

- done function에 코드를 추가했다.
1. $(this)는 현재 클릭 이벤트가 동작하는 곳을 의미  →  $(event.target)으로 대체 가능
1-1. event.target 이나 this 같은 키워드 뒤에 jQuery 함수를 붙이고 싶으면 $() 안에 넣어야한다. 
2. parent('li')는 상위 HTML 요소 중 <li> 태그를 찾으라는 의미
3. fadeOut()은 찾은 HTML 요소를 사라지게 해준다.
4. done(...)에 넣어주는 callback function은 arrow function 형태로 넣어야한다. 그래야 this 값 변형 없이 원하는 this를 사용할 수 있다.

[arrow function]
done((result) => {
    console.log(this);            
})
// arrow function은 this 값 변형없이 상위의 this 값을 그대로 사용한다.

 

 

[function 사용]
done(function(result) {
    console.log(this);            
})