[Spring Boot] AJAX / 삭제 기능

 

---

 

 

- ajax로 요청날리기

 

웹페이지에서 서버에 요청 보내는 방법 3가지

1. 주소창에 URL을 집어넣든가 (GET요청가능)

2. <form> 쓰든가 (GET, POST요청가능)

3. ajax를 쓰든가 (전부가능)

 

 

==> ajax쓰면 새로고침 없이도 서버로 요청 보낼 수 있음

 

 자바스크립트로 fetch('/URL~~') 이런걸 쓰면 ajax를 이용해서 GET 요청보내기 가능

(html 파일)

<button class="btn">테스트용</button>

<script>
  document.querySelectorAll('.btn')[0].addEventListener('click', function(){
    fetch('/test1')
  })
</script>

 

 

 

- ajax로 데이터도 전송가능

<script>

  fetch('/test', {
    method : 'POST',
    headers : {
      "Content-Type": "application/json",
    },
    body : JSON.stringify({title : 'kim', price : 123})
  })

</script>

ajax로 요청 날릴 때 설정을 기입할 수도 있습니다.

- method 속성에 어떤 method로 요청할지 설정도 가능하고

- body 속성에 어떤 데이터를 서버로 보낼지 설정도 가능하고

- headers란에 전송할 데이터의 타입을 설정도 가능하고

- 전송할 데이터가 많으면 자바스크립트 array나 object 안에 담아서 전송해도 됩니다. (자바에서의 List, Map과 유사함)

근데 array나 object자료 전송할 때는 JSON.stringify() 안에 넣어서 전달하고

타입을 application/json로 기입해야 잘 전달됨

 

 

 

- 서버는 application/json 타입 데이터 출력하려면

ajax로 application/json 타입의 데이터를 보냈다면

서버에서 출력할 땐 파라미터에 @RequestBody라는거 쓴다 

@PostMapping("/test1")
String test(@RequestBody Map<String, Object> body) {
  System.out.println(body.get("name"));
  return "redirect:/list";
}

 

그리고 변환할 자료형 맘대로 입력하면 되는데

자바스크립트 object 형태로 보냈다면 Map으로 간편하게 변환해서 쓰기

 

 

 

@PostMapping("/test1")
String test(@RequestBody Item body) {
  System.out.println(body);
  return "redirect:/list";
}

Map 말고 특정 object로 바로 변환도 가능

 

 

 

 

---

 

1. 상품마다 있는 삭제버튼 누르면 서버로 삭제요청함 

(list.html)

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

 

 

2. 서버는 삭제요청 받으면 DB에 있던 글 삭제

    // 상품 삭제 기능(AJAX 이용)
    @DeleteMapping("/delete")
    ResponseEntity<String> deleteItem(@RequestParam Long id) {
        itemRepository.deleteById(id);
// ajax로 데이터 주고받을거면 서버 측에서 html전송하고 redirect하고 그런게 불가능하기 때문에
// ResponseEntity 정도로 메세지만 보내기
        return ResponseEntity.status(200).body("삭제완료");
    }

 

 

 

-  ajax 요청 완료시 코드 실행하려면

 <span th:onclick="'fetch(\'/delete?id=' + ${i.id} + '\', { method: \'DELETE\' }).then(r => r.text()).then(a => { console.log(a); location.reload(); })'">🗑️</span>
            <!--위처럼 .then()붙이면 AJAX 요청 완료시 코드실행 가능 -->
            <!--서버가 보내주는게 문자 자료형이면 r.text() 쓰면 되고-->
            <!--서버가 보내주는게 List나 Map 자료형이면 r.json()-->
            <!--location.reload()는 브라우저를 새로고침-->

 

• ajax요청후에 서버가 보낸 데이터를 출력해보고 싶으면 .then() 을 2번 붙여주면 됩니다.
• result 같은 변수에는 서버가 보낸 자료가 들어있는데 서버가 보내주는게 문자 자료형이면 r.text() 쓰면 되고, 서버가 보내주는게 List나 Map 자료형이면 r.json() 이런거 붙여야합니다.
•  .then 안에서 window.location.reload() 이런거 쓰면 새로고침됩니다.
• e.parentElement.parentElement.style.display = 'none' 하면 지금 누른 버튼의 부모의 부모 태그를 안보이게 처리합니다.

 

 

-  URL 파라미터 써도 서버로 데이터 전송가능

서버로 데이터 전송할 수 있는 다른 간편한 방법도 있는데 URL 파라미터문법을 활용해도 됩니다.

@DeleteMapping("/item/{abc}")
(생략)

예를 들어 서버의 API에다가 URL 파라미터자리를 마련해놓으면, 이제 앞으로 /item/ 뒤에 아무 문자나 집어넣어도 이 API가 실행된다는 뜻이기 때문에 아무 문자 자리에 데이터를 몰래 집어넣는겁니다.

 

<span onclick="fetch('/item/바보')">🗑️</span>

이런 식으로 요청을 날리면 서버는 '바보'라는 문자를 출력해볼 수 있기 때문에, 이런 방식으로 서버에 데이터를 전송할 수도 있다는걸 알아둡시다.

 

 

 

 정리 :

1. 새로고침없이 서버에 요청날리려면 ajax 씁시다.

2. 서버로 데이터 전송하는 법은 query string, url parameter 같은 방법도 있습니다. 근데 URL에 데이터가 노출이 쉽게 되는 단점도 있어서 위조하기 쉬움

3. html 파일의 자바스크립트 안에 타임리프 변수 넣을 수도 있습니다.

 

---

 

* 이글은 아래 강의를 참고해 작성했습니다. 

https://codingapple.com/course/spring-boot-jpa/

쉽게 배우는 Spring Boot & JPA - 코딩애플 온라인 강좌