본문 바로가기
Java & JSP

ajax 로 한글 값 전송시 깨짐 처리

by BeGeek 2020. 4. 4.

ajax로 한글 값 전송시 깨짐 처리 정리

1) 한글 값 인코딩 없이 전송시 : 한글 깨짐

-. client (index.html) : EUC-KR, cname 파라미터에 별도 인코딩 없음

-. server (sendProc.jsp) : EUC-KR, 서버 단 별도 디코딩 처리 없음

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>ajax로 한글 파라미터 전송</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
        $(function () {

            $('#btn1').click(function () {

            	var params = "cname="+$("#cname").val() +"&cnum="+$("#cnum").val();
            	
            	$.ajax({
            	    url: 'http://localhost:8080/AjaxEncoding/sendProc.jsp',
            	    type: 'GET',
            	    data: params,
            	    dataType: 'text',
            	    success: function(msg){
						alert('success' + msg);
            	    },
            	    error: function(e){
						alert('error :'+e);
            	    }
            	});
               

            });


        });
    </script>



</head>
<body>
	
	<input type="text" id="cname" name="cname"></input>
	<input type="text" id="cnum" name="cnum"></input>
	<input type="button" id="btn1" name="btn1" value="전송"/>
</body>
</html>

sendProc.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	
	String name = request.getParameter("cname");
	String num = request.getParameter("cnum");

	out.print(name + num);



%>

결과는 한글이 깨진다. ajax로 전송시 내부적으로 UTF-8로 전송 됨.

2) 한글 값 인코딩 한번해서 전송 전송시 : 한글 깨지지 않음

-. client (index.html) : EUC-KR, cname 파라미터에 encodeURIComponent()로 인코딩 처리

-. server (sendProc.jsp) : EUC-KR, 서버 단 별도 디코딩 처리 없음

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>ajax로 한글 파라미터 전송</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
        $(function () {

            $('#btn1').click(function () {

            	var params = "cname="+encodeURIComponent($("#cname").val()) +"&cnum="+encodeURIComponent($("#cnum").val());
            	
            	$.ajax({
            	    url: 'http://localhost:8080/AjaxEncoding/sendProc.jsp',
            	    type: 'GET',
            	    data: params,
            	    dataType: 'text',
            	    success: function(msg){
						alert('success' + msg);
            	    },
            	    error: function(e){
						alert('error :'+e);
            	    }
            	});
               

            });


        });
    </script>



</head>
<body>
	
	<input type="text" id="cname" name="cname"></input>
	<input type="text" id="cnum" name="cnum"></input>
	<input type="button" id="btn1" name="btn1" value="전송"/>
</body>
</html>

sendProc.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%
	
	String name = request.getParameter("cname");
	String num = request.getParameter("cnum");

	out.print(name + num);



%>

결과는 한글이 깨지지 않고 전송된다.

3) 한글 값 인코딩 두번해서 전송, 서버쪽 디코딩 한번 : 한글 깨지지 않음

-. client (index.html) : EUC-KR, cname 파라미터에 escape() 와 encodeURIComponent()로 두번 인코딩 처리

-. server (sendProc2.jsp) : EUC-KR, 서버 단 URLDecoder.decode( , "UTF-8")로 한번 디코딩 처리

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>ajax로 한글 파라미터 전송</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
        $(function () {

            $('#btn1').click(function () {

            	var params = "cname="+escape(encodeURIComponent($("#cname").val())) +"&cnum="+escape(encodeURIComponent($("#cnum").val()));
            	
            	$.ajax({
            	    url: 'http://localhost:8080/AjaxEncoding/sendProc2.jsp',
            	    type: 'GET',
            	    data: params,
            	    dataType: 'text',
            	    success: function(msg){
						alert('success' + msg);
            	    },
            	    error: function(e){
						alert('error :'+e);
            	    }
            	});
               

            });


        });
    </script>



</head>
<body>
	
	<input type="text" id="cname" name="cname"></input>
	<input type="text" id="cnum" name="cnum"></input>
	<input type="button" id="btn1" name="btn1" value="전송"/>
</body>
</html>

sendProc2.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.net.URLDecoder" %>
<%
	
	String name = URLDecoder.decode(request.getParameter("cname"), "UTF-8");
	String num = URLDecoder.decode(request.getParameter("cnum"), "UTF-8");

	out.print(name + num);



%>

결과는 한글깨지 없이 잘 출력 됨

4) 한글 값 인코딩 두번해서 전송, 서버쪽 디코딩 한번 : 한글 깨지지 않음

-. client (index.html) : UTF-8, cname 파라미터에 escape() 와 encodeURIComponent()로 두번 인코딩 처리

-. server (sendProc3.jsp) : EUC-KR, 서버 단 URLDecoder.decode( , "UTF-8")로 한번 디코딩 처리

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax로 한글 파라미터 전송</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
        $(function () {

            $('#btn1').click(function () {

            	var params = "cname="+escape(encodeURIComponent($("#cname").val())) +"&cnum="+escape(encodeURIComponent($("#cnum").val()));
            	
            	$.ajax({
            	    url: 'http://localhost:8080/AjaxEncoding/sendProc3.jsp',
            	    type: 'GET',
            	    data: params,
            	    dataType: 'text',
            	    success: function(msg){
						alert('success' + msg);
            	    },
            	    error: function(e){
						alert('error :'+e);
            	    }
            	});
               

            });


        });
    </script>



</head>
<body>
	
	<input type="text" id="cname" name="cname"></input>
	<input type="text" id="cnum" name="cnum"></input>
	<input type="button" id="btn1" name="btn1" value="전송"/>
</body>
</html>

sendProc3.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<%@ page import="java.net.URLDecoder" %>
<%
	
	String name = URLDecoder.decode(request.getParameter("cname"), "UTF-8");
	String num = URLDecoder.decode(request.getParameter("cnum"), "UTF-8");

	out.print(name + num);

%>

5) 코드는 4)와 같고 한글(홍길동) 값을 JSEncrypt로 암호화한 값을 인코딩 두번해서 전송,

서버쪽 디코딩 한번 : 전송 전후 암호화된 값이 같음

-. client (index.html) : UTF-8, cname 파라미터에 escape() 와 encodeURIComponent()로 두번 인코딩 처리

-. server (sendProc.jsp) : EUC-KR, 서버 단 URLDecoder.decode( , "UTF-8")로 한번 디코딩 처리

- '홍길동'을 암호화한 값 LKQMu4C5Z+FOrlLK+RsnwcMarYV09eXoWrjjugmenfg5xXq4uM+9xb9tp2eyBBWGG87EUlYJ97AQcRyy82mFSMFAMYc/T5ntHrmzaWlnftZV/LSMe2FZymkE92y/GMOJiUsOK8T9mJeT05dHHcyghG1KSpgijHRquYbmskKwSzE=

- 전송 후 서버로 부터 받은 값

LKQMu4C5Z+FOrlLK+RsnwcMarYV09eXoWrjjugmenfg5xXq4uM+9xb9tp2eyBBWGG87EUlYJ97AQcRyy82mFSMFAMYc/T5ntHrmzaWlnftZV/LSMe2FZymkE92y/GMOJiUsOK8T9mJeT05dHHcyghG1KSpgijHRquYbmskKwSzE=

* 참고로 JSEncrypt로 암호화한 값은 아래 URL 통해 생성

http://travistidwell.com/jsencrypt/demo/index.html  

 

 

'Java & JSP' 카테고리의 다른 글

배열복사, 함수내 변경 총정리  (0) 2019.08.19
1의 보수, 2의 보수 활용한 비트 연산  (0) 2017.03.07
ArrayList에서 특정값 remove  (0) 2016.05.21
Arrays.copyOf , Arrays.copyOfRange 배열 복사  (0) 2016.03.15
2차원 배열 가지고 놀기  (0) 2015.03.06

관련글

댓글

티스토리툴바