Jackson2는 자바 객체를 JSON으로 변환하거나 JSON을 자바 객체로 변환해주는 라이브러리다.
pom.xml 파일에 dependency를 추가하자
|
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.3.3</version>
</dependency> |
끝이다 ㅋ
그럼 테스트를 위해 회원 가입의 아이디 중복 체크 기능을 Ajax로 만들어보자.
MemberMapper.xml에 중복 체크 쿼리를 만든다.
|
<!-- 회원 아이디 중복 체크 -->
<select id="chkMbId" resultType="int">
SELECT
count(*)
FROM TB_MEMBER
WHERE MB_ID = #{mbId}
</select> |
MemberDao 에 추가한다.
|
/** 회원 아이디 중복 체크 */
public int chkMbId ( String mbId ); |
다음으로 MemberServiceImpl에 메소드를 추가한다.
|
/** 회원 아이디 중복 체크 */
public int chkMbId(String mbId) throws Exception {
return memberDao.chkMbId(mbId);
} |
MemberService에도 추가해 준다.
|
/** 회원 아이디 중복 체크 */
public int chkMbId(String mbId) throws Exception; |
MemberController에서 MemberService.chkMbId를 이용하여 중복 체크를 처리하도록 한다.
|
/** 회원 아이디 중복 체크 */
@RequestMapping("/member/chkMbId.do")
@ResponseBody
public Map<String, String> chkMbId(String mbId) throws Exception {
Map<String, String> resultMap = new HashMap<String, String>();
int resultCnt = memberService.chkMbId(mbId);
String result = "";
String resultMsg = "";
if ( resultCnt == 0 ){
result = "success";
resultMsg = "사용가능한 아이디입니다.";
} else {
result = "failure";
resultMsg = "이미 사용중인 아이디입니다.";
}
resultMap.put("result", result);
resultMap.put("resultMsg", resultMsg);
return resultMap;
} |
controller에선 사용자가 입력한 아이디를 받아 디비에 동일한 아이디 유무 체크 후 결과와 결과메시지를 JSON으로 리턴해준다.
여기서 주의 할 점은 빨간 영역의 애노테이션이다.
@ResponseBody
컨트롤러에서 ResponseBody 애노테이션을 사용하면, 스프링에 선언되어 있는 ViewResolver를 사용하지 않고, HTTP Response Body 에 직접 쓰여지게 된다.
보통 JSON이나 XML 형식의 문자열로 변환할 때 사용된다.
기본적인 틀은 만들었다.
브라우져에서 테스트 해보자.
http://localhost/member/chkMbId.do?mbId=hong
위 URL 호출시 아래와 같은 JSON 형태의 문자열이 브라우져에 보이면 성공이다.
참고로 ie에선 아래와 같이 chkMbId.json 파일을 다운로드 하려고 한다.
이때 열기나 저장을 클릭하고 연결 파일을 에디터에 연결하면 JSON 데이터가 확인 가능하다.
이 부분은 Jackson의 응답 타입이 "application/json" 이라서 발생하는 부분이다.
응답 타입을 "text/plain"으로 변경해주면 다운로드 없이 바로 확인이 가능하다.
하지만 JSON 형태의 리턴은 브라우져에서 직접 사용하지 않기 않고, 타 기능들과 연동도 문제가 없으므로 설정 변경은 하지 않도록 하겠다.
서버단 작업이 끝났다.
이제 jsp에서 ajax를 이용하여 아이디 중복 체크 기능을 만들어보자.
먼저 Jquery 및 Jquery Ui를 다운 받자.
https://jquery.com/download/
http://jqueryui.com/download/
프로젝트 내 위치는 webapp 밑에 js 및 css 폴더 생성 후 아래의 경로에 위치 시킨다.
jquery.js 및 jquery.ui.js --> WEB-INF/js
jquery.ui.css --> WEB-INF/css
jquery ui 이미지 --> WEB-INF/css/images
다음으로 sitemesh layout인 WEB-INF/view/layout/header-footer-layout.jsp 에 import 한다.
|
<!-- 공통 CSS -->
<link rel="stylesheet" href="/css/jquery-ui-1.11.4.css" />
<!-- 공통 JS -->
<script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.11.4.min.js"></script> |
insertMemberForm.jsp에 기능을 추가한다.
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function chkMbId(){
$.ajax({
url : "/member/chkMbId.do",
type : "post",
data : {
mbId : $("#mbId").val()
},
dataType : "json",
success : function(data){
$("<div style='text-align:center;'>"+data.resultMsg+"</div>").dialog({
modal : true,
resizable : false,
buttons : [{
text : "확인",
click : function() {
$(this).dialog("close");
}
}]
});
$(".ui-dialog-titlebar").hide();
if ( data.result == "success") {
} else {
}
}
});
}
</script>
</head>
<body>
<form method="post" action="/member/insertMember.do">
회원가입<br/><br/>
<div>
<label for="mbId" style="display:inline-block;width:100px;">회원아이디</label>
<input type="text" name="mbId" id="mbId"/> <input type="button" value="중복 체크" onclick="chkMbId();">
</div>
<div>
<label for="mbName" style="display:inline-block;width:100px;">회원명</label>
<span><input type="text" name="mbName" id="mbName"/></span>
</div>
<div>
<label for="mbPw" style="display:inline-block;width:100px;">회원패스워드</label>
<span><input type="text" name="mbPw" id="mbPw"/></span>
</div>
<div>
<label for="mbAddr" style="display:inline-block;width:100px;">회원주소</label>
<span><input type="text" name="mbAddr" id="mbAddr"/></span>
</div>
<input type="submit" value="회원가입">
</form>
</body>
</html> |
회원 가입 화면 ( http://localhost/member/insertMemberForm.do ) 에서 확인해보도록 하자.
기존에 가입되어 있는 hong 으로 테스트시 아래와 같이 서버에서 보냊주는 결과 메시지인 "이미 사용중인 아이디입니다"라는 메시지가 출력된다.
없는 데이터로 조회시엔 마찬가지로 서버에서 보내 주는 메시지인 "사용가능한 아이디입니다." 라고 출력된다.
