웹페이지에서 서버에 요청을 보내는 방법은 크게 3가지가 있다.
1. 주소창에 URL을 집어 넣기(GET요청 가능)
2.`<form>`사용 (GET, POST 요청 가능)
3. `ajax`사용 (전부 가능)
DELETE 요청을 보내기 위해서는 ajax를 써야한다.
휴지통 아이콘을 누르면 DB에 저장되어있는 값을 지움과 동시에 자동 새로고침을 해서 /list화면에서 해당 아이템을
즉시 삭제시켜보겠다.
<span th:onclick="fetch('/item?id=[[${i.id}]]', { method : 'DELETE' } )
.then(r => r.text())
.then(result => {window.location.reload()})
">🗑️</span>- `Thymeleaf`문법으로 각 휴지통 아이콘에 DELETE요청을 실행할 id를 기입
- ES6에서 지원된 비동기 통신을 위한 자바스크립트 내장 API인 `fetch`사용
- 접근하고자하는 URL, 수행하고자 하는 요청 ( default 값은 GET)
.then(r=>r.text())
위 패치가 끝나 응답이 오면 응답 바디를 문자열로 읽어서 Promise로 반환.then(result => {window.location.reload()})
바디를 다 읽은 뒤 실행 => 새로고침
@DeleteMapping("/item")
String deleteItem(@RequestParam Long id) {
itemRepository.deleteById(id);
return "redirect:/list";
}@RequestsParam으로 id값을 가져옴- `deleteById`함수로 `Item`테이블에서 해당 `id`의 행 삭제
ajax의 장점
화면상에서 아이템이 삭제된것을 실시간으로 확인하기 위해 새로고침을 하는 메소드를 넣었지만
`ajax`의 최대 장점은 새로고침 없이 서버에 요청을 보낼 수 있다는 점이다.