AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리

[    AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야할 경우 인코딩 문제    ]

자바스크립트에서 비동기로 ajax로 컨트롤러로 요청을 받아 db에서 값을 꺼내 문자열을 리턴할 경우, 한글 문자열을 리턴했을 때

ajax의 success:function(result) 안에서 result로 값을 받으면 ???? 로 한글이 깨지는 경우가 있다.

이럴 경우에는 컨트롤러에서 produces 부분을 지정해주면 된다.

코드를 보면

먼저, ajax 통신 부분이다. /board/category/getAddr로 요청을 보내고 

var address = null; function getAddr(){ $.ajax({ type:'post', headers:{ "Content-Type":"application/json" }, async : false, // ajax를 동기화(순서대로) 처리해야하는 경우 true로하거나 기술하지 않으면 비동기로 작동한다. url:"/board/category/getAddr?userId=${boardDTO.userId}", dataType:"text", success : function(result){ if ( result != null ){ console.log("넘어온 값 : " + result); address = result; } } }); };

컨트롤러 부분이다.

컨트롤러에서 service.getAddr(userId)로 해당 사용자의 주소를 얻어온 뒤 그 주소를 반환하지만 한글로 반환하게 된다.

이 경우, ajax의 success:function(result) 에서 result 가 ????로 깨지는 것을 알 수 있다.

하지만, produces = "application/text;charset=utf8"을 지정해 줄 경우 한글을 인코딩해 보내서 깨지지 않고 처리할 수 있게 된다.

// 한글을 넘기기 때문에 produces 를 기술해서 인코딩을 해서 넘겨주었다. 기술안하면 ajax에서 받았을 때 ???로 깨짐! @RequestMapping(value="/board/category/getAddr",method=RequestMethod.POST,produces = "application/text; charset=utf8") public @ResponseBody String getAddr(String userId){ logger.info("주소얻기로 넘어온 아이디 : " + userId); String address = service.getAddr(userId); logger.info("얻어온 주소 : " + address); return address; }