Spring Ajax Post방식 사용 방법

1. @RequestParam으로 값 받기

type:get,

dataType: text,

contentType: application/json; charset=UTF-8

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

 

 

AJAX 기본

        let xhr = new XMLHttpRequest();
        xhr.open("POST", "/url", true);  
        xhr.setRequestHeader("content-type", "application/json");
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let recResult = JSON.parse(xhr.responseText); 
            }
        }
        xhr.onloadend = () => {
            if (xhr.status != 200) {
                let myError = {    // 억지로 
                    status: xhr.status,
                    message: xhr.statusText
                };
            }
        };
        
        xhr.send(JSON.stringify({data:"data"}));

 

 

 

Ajax get방식 보낼때

	$.ajax({
		contentType : "application/json;charset=utf-8", //charset=utf-8생략가능
		url : "/resp/goHome030105?Id=99",
		dataType : "text"
		type : "get",
		success : function(result){
			console.log('통신결과');
			console.log(result);
		}
	})

 

Ajax get방식 Controller로  받을때

	@GetMapping("/resp/goHome030105")
	public String GetMapping(@RequestParam int Id) {
		log.info("GetMapping호출");
		log.info("Id : " + Id); //결과 99
		return "Get Mapping DataType String";
	}

 

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

-없는 파라미터를 get로 보내면 400에러가 발생한다.

그럴땐 이렇게 @RequestParam 에 ()안에

required = false로 설정해주고 defaultValue를 설정해주면 값이 없을 때 설정값으로 들어가 오류를 피할 수 있다.

	//요청방식URI : /resp/goHome030102?bookId=1
	//요청방식 : get
	//BookBo{bookId=1, title=검은태양, category=드라마...}
	//골뱅이ResponseBody : VO -> JSON 으로 응답
	@ResponseBody
	@GetMapping("/goHome030102")
	public BookVO home030102(
			@RequestParam(value="bookId", required = false, defaultValue = "1") int bookId,
			BookVO bookVO) {
		log.info("bookId : " + bookId);
		log.info("bookVO : " + bookVO);
		
		bookVO.setBookId(bookId);
		
		bookVO = this.bookService.detail(bookVO);
		
		return bookVO;
	}

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에 담아서 보냄

post방식으로 @RequestBody 안쓰고  Ajax로보낼때

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

@RequestBody안쓰고  Controller에서 받을때

	@PostMapping("/post/goHome030103")
	public String PostMappingTest(VO vo) { //@RequestBody 삭제
		log.info("Vo : " + vo.toString());
		//출력결과 [no=1, Id=minwoo]
		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 post의 정석

		let bookId = $("input[name='bookId']").val();
		let data = {"bookId":bookId};
		
		$.ajax({
			url:"/resp/goHome030103",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(data),
			type:"post",
			dataTyep:"json",
			success:function(result){
				console.log("통신결과")
				console.log("result : ",result)
				
				$("textarea[name='content']").val(result.content);
			},
                        error: function(xhr, status, error) {
                            	 console.log(xhr, status, error)
                        }
		})

@RequestBody사용해서 데이터 받을 때

	//골뱅이 RequestBody : json{"bookId" : "1"} -> bookVO{bookId :1,title:null,...}
	//골뱅이 ResponseBody : bookVO{bookId :1,title:null,...} -> json{"bookId" :1,"title":null,...}
	@ResponseBody
	@PostMapping("/goHome030103")
	public BookVO home030103(
			@RequestBody BookVO bookVO) {
		log.info("bookVO : " + bookVO);
		
		bookVO = this.bookService.detail(bookVO);
		
		return bookVO;
	}