악덕고용주의 개발 일기

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

2017. 5. 31. 17:06

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

자바스크립트에서 비동기로 ajax로 컨트롤러로 요청을 받아 db에서 값을 꺼내 문자열을 리턴할 경우, 한글 문자열을 리턴했을 때

ajax의 success:function(result) 안에서 result로 값을 받으면 ???? 로 한글이 깨지는 경우가 있다.

이럴 경우에는 컨트롤러에서 produces 부분을 지정해주면 된다.

코드를 보면

먼저, ajax 통신 부분이다. /board/category/getAddr로 요청을 보내고

컨트롤러 부분이다.

컨트롤러에서 service.getAddr(userId)로 해당 사용자의 주소를 얻어온 뒤 그 주소를 반환하지만 한글로 반환하게 된다.

이 경우, ajax의 success:function(result) 에서 result 가 ????로 깨지는 것을 알 수 있다.

하지만, produces = "application/text;charset=utf8"을 지정해 줄 경우 한글을 인코딩해 보내서 깨지지 않고 처리할 수 있게 된다.

저작자표시 비영리 (새창열림)

'개발 > 스프링' 카테고리의 다른 글

스프링과 안드로이드 연동1(Html 소스 가져오기) (0)	2017.06.03
스프링에서 구글맵 연동하기 (2)	2017.05.31
AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제) (0)	2017.05.31
handlebars js 라이브러리를 이용한 View 표현하기 (1)	2017.05.31
sitemesh 추가하기 (0)	2017.05.11

AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제)

2017. 5. 31. 17:01

[ AJAX를 동기화, 비동기화 설정해서 처리하기 ]

: JAVASCRIPT AJAX를 사용할 때, 일반적인 경우 비동기로 통신을 하게 된다. 즉, 순서대로 처리되는 것이 아니라

처리 순서를 보장할 수가 없다. 따라서 꼭 순서를 지켜서 처리해야하는 경우는 동기화 방식으로 처리하도록 설정해주어야 한다.

그럼 어떻게 해야할까?

우선, ajax 내에서 async : false, 로 지정할 경우 동기화 방식으로 보내고 true로 하거나 생략할 경우 비동기방식으로 통신이 이루어지 게 된다.

저작자표시 비영리 (새창열림)

'개발 > 스프링' 카테고리의 다른 글

스프링에서 구글맵 연동하기 (2)	2017.05.31
AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리 (0)	2017.05.31
handlebars js 라이브러리를 이용한 View 표현하기 (1)	2017.05.31
sitemesh 추가하기 (0)	2017.05.11
게시글 페이징 처리하기(페이지 처리 쪽 처리) (11)	2017.05.07

handlebars js 라이브러리를 이용한 View 표현하기

2017. 5. 31. 10:31

[ HandleBars 적용하기 ]

: HandleBars는 Javascript 라이브러리 중 하나로, 보통 AJAX로 가져온 데이터를 JQuery에서 문자열로 조합한다음에 append해주는

불편함을 줄여주기 위해 주로 사용됩니다.

특징)

1. 태그를 이용해서 구성을 잡아준다.(템플릿을 만든다.)

2. 템플릿 사이사이에 데이터가 들어갈 곳에 {{ 변수 }} 로 넣어놓는다.

3. 템플릿과 데이터를 연결시 {{}} 부분에 데이터가 들어가게 된다.

이때, {{#변수}} {{/변수}} 부분에는 배열과 같은 타입의 데이터의 길이가 들어와 그 길이만큼 반복작업을 수행하게 된다.

제일먼저 사용하기 위해, HandleBars js 라이브러리를 다운로드하고,

<script src="" 를 이용해서 임포트 해주고 사용해야 한다. 이후 설명은 아래 소스코드에서 이어가겠습니다.

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<script type="text/javascript" src="/resources/js/handlebars-v4.0.10.js"></script>
<title>Insert title here</title>
</head>

<script id="entry-template" type="text/x-handlebars-template">
	<table>
    	<thead> 
        	<th>이름</th> 
        	<th>아이디</th> 
        	<th>메일주소</th> 
    	</thead> 
    	<tbody> 
       	 	{{#users}} 
       	 	<tr> 
        	    <td>{{name}}</td> 
            	<td>{{id}}</td> 
            
            {{!-- 사용자 정의 헬퍼인 email에 id를 인자로 넘긴다 --}}
            	<td><a href="mailto:{{email id}}">{{email id}}</a></td> 
        	</tr> 
        	{{/users}} 
    	</tbody> 
	</table>
	</script>
	<script>
		// [	handlebars 적용하기	]
	
		//핸들바 템플릿 가져온다.
		var source = $("#entry-template").html(); 
	
		//핸들바 템플릿 컴파일
		var template = Handlebars.compile(source); 
	
		//핸들바 템플릿에 바인딩할 데이터
		var data = {
		    	users: [
		            { name: "홍길동1", id: "aaa1" },
		            { name: "홍길동2", id: "aaa2" },
		            { name: "홍길동3", id: "aaa3" },
		            { name: "홍길동4", id: "aaa4" },
		            { name: "홍길동5", id: "aaa5" }
		        ]
		}; 
	
		//커스텀 헬퍼 등록 (id를 인자로 받아서 전체 이메일 주소를 반환)
		// 위에서 {{email id}} 에서 email부분에 id를 인자로 넘기게 되는 것!
		// 그럼 id@daum.net을 반환해서 들어가게 됨.
		Handlebars.registerHelper('email', function (id) {
		  return id + "@daum.net";
		});
	
		//핸들바 템플릿에 데이터를 바인딩해서 HTML 생성
		var html = template(data);
	
		//생성된 HTML을 DOM에 주입
		$('body').append(html);
	</script>

저작자표시 비영리 (새창열림)

'개발 > 스프링' 카테고리의 다른 글

AJAX 통신시 컨트롤러에서 한글 문자열을 리턴해야하는 경우 인코딩 문제 처리 (0)	2017.05.31
AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제) (0)	2017.05.31
sitemesh 추가하기 (0)	2017.05.11
게시글 페이징 처리하기(페이지 처리 쪽 처리) (11)	2017.05.07
스프링 환경설정 (2)	2017.05.06

PREV 1 ···39 40 41 42 43 44 45 46 NEXT

악덕고용주의 개발 일기

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

'개발 > 스프링' 카테고리의 다른 글

AJAX를 동기화, 비동기화 지정하는 방법(동기<순서대로>로 작업하는 예제)

'개발 > 스프링' 카테고리의 다른 글

handlebars js 라이브러리를 이용한 View 표현하기

'개발 > 스프링' 카테고리의 다른 글

+ Recent posts

티스토리툴바