euc-kr로 설정된 서버에서 jQuery .serialize() 한글 안깨지고 잘 사용하기

CharSet이 EUC-KR인 서버가 있습니다. 

클라이언트에서는 jQuery를 이용하여 Form을 다루려고 합니다.

myForm이라는 데이터를 전송하는 폼이 있습니다.

그 폼의 input 벨류들을 모두 jQuery의 .serialize()를 통해서 

직렬화하고(문자열로 만들고) 보내면 좋을것 같습니다.

그래서 아래처럼 함수를 작성했습니다.

var myForm = jQuery('#myForm');

jQuery.ajax({
    type : myForm.attr('method'),
    url : '/reimaginer/FormManager.ym',
    data : myForm.serialize(),
    success : function (res) {
        if(res === 'SUCCESS') {
            alert('등록되었습니다.');
        } else {
            alert('등록이 실패하였습니다.')
        }
    }
});

영어로 테스트 해봤는데 잘 됩니다. 오 좋다~ 하고 있는데, 한국어로도 테스트해봅니다.

그런데 깨집니다...

문제의 원인에 대해서 고민해보니, jQuery는 기본적으로 charSet이 UTF-8이라는게 기억납니다.

그럼이제 UTF-8로 인코딩된 언어를 어떻게 안 깨뜨리고 잘 가져올지 고민해봅니다.

예전에 모바일 프로젝트할때, 모바일 클라이언트는 charSet이 UTF-8이었습니다. 

그래서 UTF-8로 두번 인코딩하고, 서버에서 한번 자동으로 디코딩 된 후,

다시 한번, decodeUri를 통해서 한글을 가져온 것이 생각이 납니다.

인터넷을 뒤적거리다보니 비슷한 방법이 나옵니다.

.serialize() 하면 UTF-8로 한번 인코딩된 문자열이 나옵니다.

만약 폼에서 전송하려는 데이터가 '사과' 라는 문자열이라면,

'%EC%82%AC%EA%B3%BC' 

이런 놈이 반환되죠. 여기서 우리는 한번 더 인코딩합니다.

% 문자를 인코딩된 문자인 '%25'로 한번 더 바꿔주는 겁니다.

"%25EC%2582%25AC%25EA%25B3%25BC" 이렇게요.

코드는 다음과 같습니다.

var myForm = jQuery('#myForm');

jQuery.ajax({
    type : myForm.attr('method'),
    url : '/reimaginer/FormManager.ym',
    data : myForm.serialize().replace(/%/g, '%25'),
    //data : encodeURI(myForm.serialize()), 위, 아래 두가지 방법 모두 같은 결과를 반환한다.
    success : function (res) {
        if(res === 'SUCCESS') {
            alert('등록되었습니다.');
        } else {
            alert('등록이 실패하였습니다.')
        }
    }
});

그럼 서버 측에서는 어떻게 받아야 할까요.

String decodedData =  URLDecoder.decode(encodedData, "UTF-8");

한번은 자동으로 decode되니까 '%EC%82%AC%EA%B3%BC' 이 문자열을 받았겠죠.

한번만 더 디코드 해줍니다.

'사과'

이제 이 한글을 잘 사용하면 됩니다!

인터넷에 검색해보니 뭔가 해결책들이 어렵더라고요.

이렇게 한번 해보세요~