<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;
}

---

@ResponseBody란?

클라이언트 통신간 요청(Request)과 응답(Response)가 존재하는데,
이때 비동기통신(ex: Ajax)을 하기위해서는 Http body에 내용을 담아서 보내야 함
이때 String으로 데이터를 전달하지 않고, JSON 형태로 데이터를 전달

@ResponseBody은 서버와 클라이언트 비동기통신에서 JSON 데이터를 보내줄 수 있게 하는 어노테이션