<script type="text/javascript">
function fn_Click(){
var parameters = $("#frm").serialize();
$.ajax({
type:"post",
dataType:"json",
async:false,
url:"<c:url value='/example'/>",
data:parameters ,
success:function(data){
console.log(data.result);
}
});
}
</script>
@PostMapping("/example")
public Map<String, Object> example(UserVO userVO){
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("result", "성공");
return resultMap;
}
위의 코드를 실행했을때 Ajax는 실행되었지만 404 에러가 발생함
이로인해 Ajax의 success 함수가 실행되지 않았음
Controller에서 @ResponseBody 를 추가해주면 됨
<script type="text/javascript">
function fn_Click(){
var parameters = $("#frm").serialize();
$.ajax({
type:"post",
dataType:"json",
async:false,
url:"<c:url value='/example'/>",
data:parameters ,
success:function(data){
console.log(data.result);
}
});
}
</script>
@PostMapping("/example")
@ResponseBody
public Map<String, Object> example(UserVO userVO){
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("result", "성공");
return resultMap;
}
클라이언트 통신간 요청(Request)과 응답(Response)가 존재하는데,
이때 비동기통신(ex: Ajax)을 하기위해서는 Http body에 내용을 담아서 보내야 함
이때 String으로 데이터를 전달하지 않고, JSON 형태로 데이터를 전달