[스프링] Spring Controller 컨트롤러 Ajax 데이터통신 유형 정리

Ajax <> Controller 데이터 통신 방법 정리를 위해 작성한다. (매번 삽질)

 

@RequestParam 어노테이션을 활용하면, Request Header에 Parameter를 넣어서 전달
@RequestBody 어노테이션을 활용하면, Request Body에 Data를 넣어서 전달

Get method은 순수하게 데이터를 읽을 때 > SELECT
Post method는 데이터를 입력 > INSERT
Put method는 데이터를 수정 (UPDATE) or 삭제 (DELETE)
Delete method는 데이터를 삭제 (DELETE)

1. @RequestParam 로 값 받기

type:  get  , dataType : text  , contentType: application/json; charset=UTF-8

- 데이터를 URL에 담에서 보낸다.

화면

$.ajax({ 
    type: "get"
    , url: "/get/hello2?id=100"
    , contentType:"application/json; charset=UTF-8" //charset=UTF-8 생략가능
    , dataType : "text"
    , success: function(data){
        console.log('통신결과');
        console.log(data);
    }
})

컨트롤러

//없는 파라미터를 던지면 400에러가 난다
@GetMapping("/get/hello2")
public String GetMapping (@RequestParam int id) {
    System.out.println(" get/hello2 호출 ");
    System.out.println(" id  : "+id); //결과 100
    return "Get Mapping DataType String";
}

 

- 컨틀로러에서 메소드의 리턴이 String이면 dataType옵션을 text로 해야한다. dataType을 json으로 하면 아무것도 받지 못한다.

- 없는 파라미터를 get로 보내면 400에러가 발생한다.  /get/hello2?name=100  ERROR 

- application/json; charset=UTF-8에서 charset=UTF-8 생략가능하다.

 

2. @RequestBody 안쓰고 Vo로 값 받기 (FormData type Vo)

type : post,  dataType : text,  contentType: application/x-www-form-urlencoded; charset=UTF-8

- 데이터를 body에 담아서 보낸다.

 

화면

$.ajax({ 
	type: "post"
	, url: "/post/insertBbs"
	, data: {"no" : "1", "id" : "devmk"}
	, contentType:"application/x-www-form-urlencoded; charset=UTF-8" //charset=UTF-8 생략가능
    //contentType 옵션 생략시 기본이 application/x-www-form-urlencoded; charset=UTF-8
	, dataType : "text"
	, success: function(data){
		console.log('통신결과');
		console.log(data);
	}
})

컨트롤러

@PostMapping("/post/insertBbs")
public String PostMappingTest (Vo vo) { //@RequestBody 삭제
    System.out.println("Vo : "+vo.toString());
    //출력결과 [no=1, id=devmk]
    return "Post Mapping DataType String";
}

 

- ajax 에서 폼데이터(FormData)를  vo로 보내려면 contentType 을 생략하거나 contentType에 application/x-www-form-urlencoded; charset=UTF-8을 지정해야 한다.

- FormData를 보낼때 사용하며 FormData는 json이 아니기 때문에 @RequestBody를 삭제한다.

 

 

3. @RequestBody 쓰고 Vo로 값 받기 (Json Type Vo)

type : post,  dataType : text,  contentType: application/json; charset=UTF-8

화면

$.ajax({ 
	type: "post"
	, url: "/post/insertBbs"
	, data: JSON.stringify({"no" : "1", "id" : "devmk"})
	, contentType:"application/json"
	, dataType : "text"
	, success: function(data){
		console.log('통신결과');
		console.log(data);
	}

})

컨트롤러

@PostMapping("/post/insertBbs")
public String PostMappingTest (@RequestBody Vo vo) { //@RequestBody추가
    System.out.println("Vo : "+vo.toString());
    //출력결과 [no=1, id=devmk]
    return "Post Mapping DataType String";
}

 

- 컨트롤러에서 json형태의 vo를 받으려면 json 문자열 형식으로 변환해서 보내야 하기 때문에 JSON.stringify를 사용한다. (JSON.stringify는 자바스크립트 객체를 ➡ JSON 문자열로 변환) json 형태의 Vo를 받기위함.

- @RequestBody란 ? HTTP Body안에 JSON을 VO에 맵핑하는 스프링 어노테이션이다. Body를 자바 객체로 받는다.

 

4. @RequestParam Map으로 값 받기

type : post,  dataType : text,  contentType: 생략

- 데이터를 body에 담아서 보낸다.

 

화면

$.ajax({ 
	type: "post"
	, url: "/post/insertBbs"
	, data: {"no" : 1, "id" : "devmk"}
	, dataType : "text"
	, success: function(data){
		console.log('통신결과');
		console.log(data);
	}

})

컨트롤러

@PostMapping("/post/insertBbs")
public String PostMappingTest (@RequestParam Map<String, Object> vo) {
    System.out.println("Vo : "+vo.toString()); 
    //출력결과 [no=1, id=devmk]
    return "Post Mapping DataType String";
}

- contentType 을 생략하면 default값이 application/x-www-form-urlencoded; charset=UTF-8로 적용된다.

-  ajax에서 보낸 데이터를 컨트롤러에서 @RequestParam 어노테이션을 이용하여 Map으로 받을 수 있다.

 

 

PutMapping, DeleteMapping은 PostMapping과 다르게 @RequestBody형태로 받아야 하며

ajax에서는 json형태로 보내야한다.

//Controller 받는부분
@PutMapping("/update")
@ResponseBody
public ApiResultVo<Integer> update(@RequestBody Vo vo) throws Exception {

//javascript
$.ajax({'type': 'put', contentType:"application/json", 'data' : JSON.stringify({'key1' : 'value1', 'key2' : 'value2'}), 'url': '/update'})

//Controller 받는부분
@DeleteMapping("/delete")
@ResponseBody
public ApiResultVo<Integer> delete(@RequestBody Vo vo) throws Exception {

//javascript
$.ajax({'type': delete, contentType:"application/json", 'data' : JSON.stringify({'key1' : 'value1', 'key2' : 'value2'}), 'url': '/delete'})