[Spring Boot]AJAX로 상품삭제기능만들기 / 자바스크립트 query string타임리프 문법

상품삭제기능 타임리프 query string 

 

list.html

 

누가  삭제버튼 누르면 /itemDelete에 아이템의 id값을 가지고 delete 요청 해주세요를 query string으로.

 

(자바스크립트 안에 { method : 'DELETE' , body : }  이런식으로 body에 넣어와도 괜찮으나 delete요청할땐 안먹히는 경우가 많음)

일단 우리는 item을 i변수로 가지고 오고 있으니까  ${i.id}을 쓰는데 

 

자바스크립트 타임리프 문법 

 

자바스크립트 안에 타임리프 문법을 쓰려면 th: 를 붙여주고 괄호 [[]]를 붙여줘야함 

   <span th:onclick="fetch('/itemDelete?id=[[${i.id}]]', { method : 'DELETE' } )">🗑️</span>

최종 

<div th:replace="~{nav.html::navbar}"></div>

<div class = "card" th:each="i :${items}">
  
    <img src="https://placehold.co/300">

  <div><a th:href="@{'/detail/' + ${i.id} }">
   
     <h4 th:text="${i.title}" >바지</h4></a>
        <p th:text="${i.price + '원'}" >7억</p>
      <a href="/edit/1">수정</a>
        <span th:onclick="fetch('/itemDelete?id=[[${i.id}]]', { method : 'DELETE' } )">🗑️</span>

    </div>
</div>
<button class="btn">버튼</button>

 

 

 

서버controller

 

Delete로 요청을 보냈으니 @DeleteMapping

@DeleteMapping("/itemDelete")

query string 으로 보낸 데이터 출력하고 싶으면 @RequestParam 타입 데이터이름

String itemDelete(@RequestParam Long id) {

 

상품 1개 즉 한개의 행을 삭제할것이기때문에 .deleteById()

itemRepository.deleteById(id);

 

 

그리고 ajax로 데이터만 주고받을때는 리다이렉트가 원래 안먹힘

그래서 ResponseEntity로 그냥 상태정도만 보내주기. 

return ResponseEntity.status(200).body("삭제완료");

 

근데 ResponseEntity이거쓰려면 리턴타입도 같게 바꿔줘야함 

ResponseEntity<String> itemDelete(@RequestParam Long id) {

 

최종

@DeleteMapping("/itemDelete")
ResponseEntity<String> itemDelete(@RequestParam Long id) {
    itemRepository.deleteById(id);

    return ResponseEntity.status(200).body("삭제완료");
    }

 

 

 

 

인줄알았는데

왜 업데이트가 안되냐면 리로드해달라는 요청까지는 안만들었음

 

서버를 새로고침하려면 ? 

 

.then 2개 붙이면 ajax 요청완료시 코드실행가능 

result같은 변수에 서버가 보낸 값이 들어있는데 

 

1번째엔 서버에서 보내는 값이 map이나 list 형식이면 r.json()

서버에서 보내는 값이 그냥 텍스트면  r.text())

.then(r => r.text())

 

2번째엔 콜백함수라고 ajax가 완료가됐을때 실행해주는 코드를 써주면 됨

서버가 보낸 파라미터를 콘솔에 출력하고 

화면을 새로고침 하려면 

.then((a) => {
console.log(a);
location.reload();

근데  사실 그냥 이렇게만 하면 리로드 해달라는건 서버가 실패하든 성공하든 다 해주기때문에

여기다가 실패하면 뭐 다르게 뭘해달라 이런것도 짜줘야 하긴함 

 

 

최종 

 

<div th:replace="~{nav.html::navbar}"></div>

<div class = "card" th:each="i :${items}">
 
    <img src="https://placehold.co/300">

  <div><a th:href="@{'/detail/' + ${i.id} }">

     <h4 th:text="${i.title}" >바지</h4></a>
        <p th:text="${i.price + '원'}" >7억</p>
      <a href="/edit/7">수정</a>
      <span th:onclick="fetch('/itemDelete?id=[[${i.id}]]', { method : 'DELETE' } )
        .then(r => r.text())
        .then((a) => {
        console.log(a);
        location.reload();
        })
        ">🗑️</span>
    </div>
</div>
<button class="btn">버튼</button>