[jQuery] ajax이용시 controller에서 String 형으로 한글 문자열 값 받아오기

user의 id를 중복체크하는 유효성 검사를 하는 기능을 구현중이었다.

근데 ajax를 통해서 입력이 끝나면 (= 다른 곳으로 포커스를 옮기면 : blur event 이용) 중복검사를 하도록 

기능을 구현하던 도중에   ajax에서 controller까지는 잘 가지만 다시 return하여 ajax로 오는 동작에 문제가 있음을 발견하였다.

return값은 String 이었는데 문자가 깨져서 ???로 오는 현상이었다. 

 

 

이렇게 콘솔창을 통해서 확인하였음

 

검색하다보니 String반환시에는 한글이 깨져서 올 수 있다고 한다.

이 때

 produces = "application/text;charset=utf8"

 

이 코드를 controller에 추가해주면 된다.

코드는 method방식 다음에 넣었다.

아래 코드 참조

	// user id 중복 체크
	@ResponseBody
	@RequestMapping(value="userIdCheck", method = RequestMethod.POST, produces = "application/text;charset=utf8")
	public String userIdCheckPOST(String us_id) {
		logger.debug("userIdCheckPOST(String us_id)호출");
		String result = "입력";
		if(us_id == null || us_id.equals("")){ // 아이디 입력안함
			logger.debug("입력 ? : " + result);
		}else{
			result = uService.userIdCheck(us_id);
			logger.debug("result 값 체크 : " + result);
			if(result == null || result.equals("")){ //중복 아이디 없음
				result = "가능";
				logger.debug("가능 ? : " + result);
			}else { // 중복 아이디 있음
				
			}
		}
		return result;
		
	}

 

 

또한 ajax에서 dataType을 text로 지정해야한다.

 

// 아이디 중복체크
$('#us_id').blur(function(){
    var us_id = $('#us_id').val();
    $.ajax({
        type : "post",
        url : "../user/userIdCheck",
        data : {"us_id" : us_id},
        dataType : "text",
        error: function(){
            alert("아이디 중복체크 에러");
        },
        success : function(data){
            console.log("받아온 데이터 : " + data);
            if(data == "가능"){ // 사용가능한 아이디
                $('#id_ok').css("display","block");
                $('#id_no').css("display","none");
                $('#us_pw').focus();
            }else if(data == "입력"){	// 아이디 입력 안함
                console.log("두번째");
                $('#id_ok').css("display","none");
                $('#id_no').text('아이디를 입력해주세요.');
                $('#id_no').css("display","block");

            }
            else{ // 사용불가능한 아이디
                console.log("세번째");
                $('#id_ok').css("display","none");
                $('#id_no').text('사용할 수 없는 아이디입니다.');
                $('#id_no').css("display","block");
            }	
        } // success 끝	
    }); // ajax 끝
}); // 아이디 중복체크 끝

 

이렇게 설정해주면

 

물음표로 표시되던 글자가 제대로 보인다.

 

---

 

참고한 글

 

AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리 :: 악덕고용주의 개발 일기 (tistory.com)

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