$("#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"; }