-
[스프링] Spring Controller 컨트롤러 Ajax 데이터통신 유형 정리Spring 2022. 2. 28. 09:50반응형
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'})
반응형'Spring' 카테고리의 다른 글
[파일업로드] 이미지 업로드시 엑박오류, 이상한 경로에 C:\...(생략)\.metadata\.plugins\ 저장된다면? (0) 2023.03.05 [Spring] 스프링 AOP를 이용해 트랜잭션(transaction) 처리하기 (0) 2022.06.27 Spring 스프링 pom.xml 오류해결 cvc-elt.1.a: Cannot find the declaration of element 'project' (4) 2022.02.12 Spring REST API 정의와 설계 규칙 (0) 2020.08.31 Spring @Autowired, @Resource, @Inject의 어노테이션 차이 (0) 2020.07.02