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

by 조쉬 posted Jul 04, 2018
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

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

    }