자바스크립트에서 비동기로 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;
}
