AJAX 사용

서버로 요청 날리는 법

1. 주소창에 url 기입(GET)

2. <form>전송 (GET,POST)

3. AJAX(GET,POST,PUT,DELETE 등)

 

AJAX - 새로고침 없이 서버로 요청을 날리는 자바스크립트 코드

 

ajax 사용법

<script>
  document.querySelectorAll('.btn')[0].addEventListener('click', function () {
    fetch('/test1', {
      method : 'POST',
      headers : {'Content-Type' : 'application/json'},
      body : JSON.stringify({name : "kim"})
    })
  })
</script>

button 누르면 새로고침 없이 데이터 전송(body) 및 요청 전달

 

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

fetch('test1?이름=값&이름=값') (GET)형태로도 전송 가능

 

<span onclick="fetch()"></span>과 같이 onclick 안에 js 코드 집어넣을 수 있음, thymeleaf 변수도 js 안에서 사용 가능

 

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

thymeleaf 변수를 js내에서 사용하려면 [[${i.id}]]와 같은 문법 사용

 

@DeleteMapping("/item")
ResponseEntity<String> deleteItem(@RequestParam Integer id){
    itemRepository.deleteById(id);
    return ResponseEntity.status(200).body("delete complete");
}

 

<span onclick="fetch('/item?id=[[${i.id}]]', { method : 'DELETE' } )
  .then(r => r.text())
  .then(result => { 서버응답이 오면 실행할 코드 })
">🗑️</span>

result 같은 변수에는 서버가 보낸 자료가 들어있음

서버가 보내주는게 문자 자료형이면 r.text() 쓰면 됨

서버가 보내주는게 List나 Map 자료형이면 r.json() 붙여야함

 

then 안에서 window.location.reload() 이런거 쓰면 새로고침

e.parentElement.parentElement.style.display = 'none' 하면 지금 누른 버튼의 부모의 부모 태그를 안보이게 함

 

url 파라미터 형식으로도 서버에 데이터 전송 가능