[Spring Boot]AJAX기능 간단하게 배우기 서버로 요청 날리는법

 

 

서버로 요청 날리는법 

1.  URL 파라미터 날리기 

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

3. ajax (GET/POST/PUT/DELETE...)

4. query String

 

AJAX란?

새로고침없이도 서버에 요청을 날릴수있는 자바스크립트 코드 

 

AJAX 세부설정기능 

클래스명이 btn인 0번째버튼을 클릭하면  안에 있는 내용들을 요청해주세요 

document.querySelectorAll('.btn')[0].addEventListener('click',function(){

/url 명시

fetch('/test1',{

method : post/get/delete 등 무슨요청 할건지 

method : 'POST',

headers : json타입의 데이터를 보내겠다고 명시해 줘야함 

대강 array/object을 문자로 변환한게 json이다 생각하면 됨 

headers : { 'Content-Type' : 'application/json' },

body : 전송할 데이터를 적는곳인데 

데이터 전송방법은 여러가지

1. '전송할데이터'

2. array/object 자료도 전송가능 (list/map 같은거 )

근데 array/object자료들은 JSON.stringify() 여기 안에 넣어줘야 문자로 변환할때 안깨짐

{key : 'value'} 이렇게 가져감 

 

참고로 delete 요청할때는 body의 값이 잘 안날라갈수도 있음 

그럴땐 query String이나 POST요청으로 하면 됨 

body : JSON.stringify({name : 'kim'})

 

최종

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

    })


</script>

 

 

서버Controller

 

POST로 /test1 으로 

@PostMapping("/test1")

 

ajax으로 값을 받으려면 @RequestBody 

그리고 array/object형태로 값을 받을거니까 map

String test1(@RequestBody Map<String, Object> name){

 

name만 출력해보면 map 형태로 가져오고 

System.out.println(name);

.get("name") 으로 쓰면 kim만 가져옴 

System.out.println(name.get("name"));

 

 

최종 

 

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

}

 

 

 

출력결과 

 

 

 

 

query String

 

 

url에 값을 넣어서 보내줄수도 있는데 

fetch('/test2?이름=값') 이런식으로 앞에 /url써주고 이름=값 적어주면 됨 

만약 여러가지 값을 보내고 싶으면 연결연산자로 & 이거 써주면 됨 

fetch('/test2?name=kim&age=20')

 

최종 

<script>

    document.querySelectorAll('.btn')[0].addEventListener('click',function(){
        fetch('/test2?name=kim&age=20')
    })

</script>

 

 

 

서버Controller 

 

query String으로 값을 받으려면 

@RequestParam 으로 받아야함 

String test2(@RequestParam String name,int age){

query String으로 받을시 단점 

- 전송하는 데이터가 유저한테도 보임

- 그래서 코딩에 대해 잘 모르는 사람들도 악용가능 

 

최종 

@GetMapping("/test2")
String test2(@RequestParam String name,int age){
        System.out.println(name);
        System.out.println(age);
    return  "redirect:/list";

}

 

URL 파라미터 날리기 

 

url뒤에 값을 숨겨놓고 날리면

<span th:onclick="fetch('/itemDelete/멍청이', { method : 'DELETE' } )

 

서버controller

 

url에 받아올 괄호를 써주고 

@PathVariable를 이용해서 값을 받아오면 됨 

@DeleteMapping("/itemDelete/{abc}")
ResponseEntity<String> itemDelete(@PathVariable Long id) {