[Spring] ajax 비동기 데이터 전송

	$("#registerBtn03").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		let userObject = {
			"userId":userId,
			"password":password
		};
		
		$.ajax({
			url:"/register03",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObject),
			type:"post",
			dataType:"text",	//받는 데이터의 타입
			success:function(result){
				console.log("result : " + result);
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}
		});
	});

아작스로 데이터 전송할 때 문자열로 보내야 하니까 자바스크립트 객체를 JSON.stringify() 를 사용해 준다

	@ResponseBody
	@PostMapping("/register03")
	public String register03(@RequestBody Member member) {
    
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		
		return "success";
	}

ajax에서 contentType이 json으로 왔으니까 MemberVO 변수에 꼭 @RequestBody 붙여서 담아주어야 한다!

어노테이션 붙이면 jackson-databind 가 매핑해줌

어노테이션 안 붙이면 VO에 못 담아줌

그냥 String userId 여기에 @RequestBody 붙이는 것도 못 담는다

객체 타입의 json요청데이터는 문자열 매개변수로 처리할 수 없다

json타입 말고 보낼 때 그냥 문자열로 보냈으면 @RequestBody 없어도 String, VO 다 담아진다

 

그리고 다시 jsp로 데이터 보내줄 거니까 @ResponseBody 꼭 써줘야 success.jsp 안 찾고 success를 잘 전달해 준다

 

=== 연산자는 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환한다
== 보다 더 엄격하게 비교한다

 

 

자바스크립트 어레이로 json객체 여러 개 보낸 거를 List 타입 매개변수로 받았다

	$("#registerBtn07").on("click",function(){
		let userObjectArray = [
			{"userId":"name01","password":"pw01"},
			{"userId":"name02","password":"pw02"}
		];
		
		$.ajax({
			url:"/register07",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObjectArray),
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : " + result);
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}		
		});
	});

	@ResponseBody
	@PostMapping("/register07")
	public String register07(@RequestBody List<Member> memberList) {
    
		for (Member member : memberList) {
			log.info("userId : " + member.getUserId());
			log.info("password : " + member.getPassword());			
			log.info("------------------");			
		}
		
		return "SUCCESS";
	}

 

 

 

중첩된 자바빈은 객체 안에 객체를 넣어서 전달해서 VO로 받았다

	$("#registerBtn08").on("click",function(){
		let userId = $("#userId").val();
		let password = $("#password").val();
		
		let userObject = {
			"userId":userId,
			"password":password,
			"address":{
				"postCode":"12345",
				"location":"경기 수원시"
			},
			"cardList":[
 				{"no":"23456","validMonth":"24/05"},
 				{"no":"12342","validMonth":"27/03"}
			]
		};
		
		$.ajax({
			url:"/register08",
			contentType:"application/json;charset=utf-8",
			data:JSON.stringify(userObject),
			type:"post",
			dataType:"text",
			success:function(result){
				console.log("result : " + result);
				if(result==="SUCCESS"){
					alert("SUCCESS");
				}
			}		
		});
	});

	@ResponseBody
	@PostMapping("/register08")
	public String register08(@RequestBody Member member) {
		
		log.info("userId : " + member.getUserId());
		log.info("password : " + member.getPassword());
		
		Address address = member.getAddress();
		
		if(address != null) {
			log.info("postCode : " + address.getPostCode());
			log.info("location : " + address.getLocation());
		}
		
		List<Card> cardList = member.getCardList();
		
		if(cardList != null) {
			for (Card card : cardList) {
				log.info("no : " + card.getNo());
				log.info("validMonth : " + card.getValidMonth());
			}
		}
		
		return "SUCCESS";
	}