새소식

인기 검색어

JAVA 교육/Spring

2019/10/17 AJax 사용법 2 (JSON, Cookie)

  • -

 AJAX

▶ 사용자 요청 명령어 불러오기

 System.out.println(req.getRequestURI()); 
 System.out.println(req.getRequestURL());

사용자가 요청한 명령어는  " req.getRequesURL() " 을 사용하면 값을 불러올 수 있습니다.

' /form1/member/test.do '  는 String 자료형의 요청 명령어 이고

' http://localhost:8090/form1/member/test.do '  는 StringBuffer 자료형의 요청 명령어 입니다.

1. ajaxTest (ajax 의 또다른 사용법)

aJax 객체 기본값 지정

$("button").click(function(){

    //AJAX 객체의 기본값 지정
 	$.ajaxSetup({dataType:"text"});
 	//$.get("요청명령어",callback함수)
 	$.get("test.do",function(result){
 		$("#panel").append(result);
 	});//get() end
 	  
 });//click end

$.ajaxSetup({}) : 객체의 기본값을 설정

$.get("요청명령어",callback) : get 방식으로 요청을 하며, 응답이 왔을때 callback 함수가 실행!! 

 

callback  함수 호출

$("button").click(function(){
	//3)callback 함수 호출
 	$.get("test.do",responseProc);//ger()end
   });//click end
    
 function responseProc(result){
 		$("#panel").append(result);
 }//responseProc() end

$.get("요청명령어",callback함수) get 방식으로 요청을 하며, 응답이 왔을때 reaponseProc 라는 함수를 
아래에서 호출하는 방식

 

test

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_ajaxTest.jsp</title>
</head>
<body>
	<h3>[회원가입]</h3>
	<form>
	<table>
		<tr>
			<td><input type="text" name="uid" id="uid"></td>
			<td><div id="demo" style="display:none"></div></td>
		</tr>
	</table>
	</form>
	<script src="../js/jquery.js"></script>
	<script>
		$("#uid").keyup(function(){
			alert();
		});//keyup() end
	</script>
</body>
</html>

 

▼ 회원 가입 폼에 아이디 한글자 한글자 입력할 때 마다 alert 창이 나오는지 테스트 해보겠습니다.
(test가 끝나고 alert() 코드는 주석을 걸어 주었습니다.)

 

2. 02_ajaxTest

<script>
	$("#uid").keyup(function(){
		//alert();
		$.post("idcheck.do",			//요청명령어
				"uid="+$("#uid").val(),	//서버 전달값
			responseProc			//콜백함수
			);//post() end
	});//keyup() end
		
	function responseProc(result){
		//alert(result);
			$("#demo").empty();
			$("#demo").html(result);
			$("#demo").show();
	}//responseProc() end
</script>

1. id 가 uid 를 찾아서 keyup 이벤트 함수를 만들어 줍니다.

※ 여기서 잠깐!!!

왜 keypress 가 아닌 keyup 이벤트를 사용하는 것일까요?

영문을 입력하면 keypress 이벤트가 사용하기 좋지만 한글은 keypress 이벤트를 지원하지 않습니다.

따라서 keypress 이벤트는 배제해야 합니다.

그리고 keydown 이벤트가 아니가 keyup 이벤트를 사용해야 합니다.

이는 키보드 이벤트가 어떠한 순서로 발생하는지를 안다면 이해하기 수월할 것입니다.

 

키보드 이벤트는 다음과 같은 순서로 진행됩니다.

1. 사용자가 키보드를 누른다.

2.keydown 이벤트가 발생한다.

3. 글자가 입력된다.

4. keypress 이벤트가 발생한다.

5. 사용자가 키보드에서 손을 뗀다.

6.keyup 이벤트가 발생한다.

따라서 keydown 이벤트가 발생한 순간에는 글자가 입력되어 있지 않습니다.

여기서는 입력한 글자 수를 표시해야 하므로 keyup 이벤트를 사용했습니다.

 

2. $.post() : post 방식으로 idcheck.do 명령어를 입력합니다. 입력하는 과정에는 uid 의 값을 가져가기 위해 
 서버 전달값을 설정해 주고 callback 함수를 호출해 줍니다.

3. 호출한 reponseproc 함수는 # demo 를 찾아가 값이 있으면 지워 주고, 받은값을 그자리에 출력하며 보여줍니다.

 

3. AjaxTestCont

@RequestMapping("/member/idcheck.do")
	public void idCheck(HttpServletRequest req,HttpServletResponse resp ) {
		try {
			String uid=req.getParameter("uid").trim();
			String message="";//응답메시지
			if(uid.length()<5||uid.length()>=11) {
				
				message="<span style='color:red;font-weight:bold'>아이디는 5~10글자 이내 입력해 주세요~!</span>";
			}else {
				
				MemberDAO dao=new MemberDAO();
				int cnt= dao.duplecateID(uid);//아이디 중복확인
				if(cnt==0) {
					message="<span style='color:skyblue;font-weight:bold'>사용가능한 아이디 입니다.</span>";
				}else {
					message="<span style='color:green;font-weight:bold'>중복된 아이디 입니다.</span>";
				}//if end
			}//if end
			
			resp.setContentType("text/plain; charset=UTF-8");
			PrintWriter out=resp.getWriter();
			out.println(message);
			out.flush();
			out.close();
			
		}catch(Exception e) {System.out.println("응답 실패"+e);}
	}//idCheck() end

테이블에 데이터가 없는 아이디    /    테이블에 데이터가 존재하는 아이디

 

4. 03_idCheck_cookie.jsp

<script src="../js/jquery.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script>
	$("#checkId").click(function(){
		//$.post("요청명령어",전달값,callback 함수, 응답받는 형식)
		var params="uid="+$("#uid").val();
		$.post("idcheck2.do",params,checkID,"text");
	});//click() end
	
	function checkID(result){
		alert(result);
	}//checkID() end
	
</script>

▲ 03_idCheck_cookie.jsp 폼에서 Ajax 를 설정하여 "중복확인"을 눌렀을때 전달값을 가져갔다 callback함수로 돌아온다.

 

5. AjaxTestCont

@RequestMapping("/member/idcheck2.do")
		public void idCheck2(HttpServletRequest req,HttpServletResponse resp) {
			try {
				String uid=req.getParameter("uid").trim();
				MemberDAO dao=new MemberDAO();
				int cnt= dao.duplecateID(uid);//아이디 중복확인
				
				//1)text로 응답--------------------------------------------------
				resp.setContentType("text/plain; charset=UTF-8");
				PrintWriter out=resp.getWriter();
				out.println(cnt);
				out.flush();
				out.close();
				
			}catch(Exception e) {System.out.println("응답 실패~!"+e);}
		}//idCheck2() end

▲ idcheck.do명령어를 mapping 을 찾아 와서 받아온 id값이 dao를 값을 cnt에 넣어주고 값을 callback해준다.

 

아이디가 존재 하지 않을 경우 cnt값이 0
아이디가 존재 하는 경우 cnt값이 1

 

6. 03_idCheck_cookie.jsp (JSON)

아이디 중복을 위해 앞에서 불러온uid 값을 text로 응답을 받아보았습니다.
이렇게 text로 응답을 받을 수도 있지만 , Spring 에서 자주 사용하게 될 JSON으로도 응답을 받아 보겠습니다.

1) JSON 사용을 위해  pom.xml 에 의존성 추가 (라이브러리 추가)

 

<script src="../js/jquery.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script>

	$("#checkId").click(function(){
		//$.post("요청명령어",전달값,callback 함수, 응답받는 형식)
		var params="uid="+$("#uid").val();
		$.post("idcheck2.do",params,checkID,"json");
	});//click() end

	function checkID(result){
		
        //2)JSON 응답
		var count=eval(result.count);
		if(count==0){
			$("#panel_id").css("color","blue");
			$("#panel_id").text("사용 가능한 아이디 입니다.");
		}else{
			$("#panel_id").css("color","red");
			$("#panel_id").text("중복된 아이디 입니다.");
			$("#uid").focus();//커서 생성
	}//checkID() end
	
</script>

▲ 응답받는 형식을 text 에서 json 으로 변경을 해준뒤 전달값을 idcheck2.do 명령어로 전달 해준뒤 callback 값가져옵니다. callback 함수는 응답 받아온 값을 구분해서 panel_id 를 찾아서 css를 변경해주고 text 를 출력해 줍니다.

 

@RequestMapping("/member/idcheck2.do")
		public void idCheck2(HttpServletRequest req,HttpServletResponse resp) {
			try {
				String uid=req.getParameter("uid").trim();
				MemberDAO dao=new MemberDAO();
				int cnt= dao.duplecateID(uid);//아이디 중복확인
				
				//2)json 응답
				//pom.xml 에 의존성 추가 (라이브러리 추가)
				JSONObject obj= new JSONObject();
				//     key, value
				obj.put("count",cnt);
				resp.setContentType("text/plain; charset=UTF-8");
				PrintWriter out=resp.getWriter();
				out.println(obj.toString());
				out.flush();
				out.close();
				
			}catch(Exception e) {System.out.println("응답 실패~!"+e);}
		}//idCheck2() end

▲ JSONObject 객체를 생성해준뒤 obj.put("key",value) 형태로 key value 값을 정해준 후 obj를toString 객체 형태로 응답을 해줍니다.

결과

 

7. cookie 

id값이 "사용 가능한 아이디 입니다." 라는 문구가 나오는 아이디에 한에서 cookie를 사용해 보겠습니다.

3) 03_idCheck_cookie.jsp

<script>
function checkID(result){
		//1)text 응답
		//alert(result);
		
		//2)JSON 응답
		//alert(result);
		//alert(result.count);
		
		var count=eval(result.count);
		if(count==0){
			$("#panel_id").css("color","blue");
			$("#panel_id").text("사용 가능한 아이디 입니다.");
			//$.cookie("쿠키변수명",값)
			$.cookie("checkID","PASS")//쿠키변수 생성
		}else{
			$("#panel_id").css("color","red");
			$("#panel_id").text("중복된 아이디 입니다.");
			$("#uid").focus();//커서 생성
		}//if end
	}//checkID() end
    </script>

 

▲ 사용가능한 아이디가 나왔을 때
$.cookie("checkID","PASS")       를 작성하여 쿠키 변수를 생성 해 주었습니다. 그렇지 않은 경우는 uid에 커서를 생성해 줍니다. 

 

function send(){
		//아이디 중복확인을 해야만 회원가입폼이 서버로 전송
		//쿠키변수값 가져오기 
		var checkID=$.cookie("chechID");
		if(checkID=="PASS"){
			return true;
		}else{
			$("#panel_id").css("color","skyblue");
			$("#panel_id").text("아이디 중복확인 해주세요.");
			$("#uid").focus();//커서 생성
			return false;
		}//if end
	}//send() end

 

▲ 아이디를 입력하여 폼을 제출하였을때 onsubmit 으로 return 값을 반환하는데 이 반환 하는 함수는 send() 하는 함수로 정해 놨습니다.

 

▲ 중복확인을 하지 않고, 가입버튼을 누르게 되면 중복확인을 확인해 주세요 라는 문구가 AJAX 로 출력됩니다.

 

 

 

 

'JAVA 교육 > Spring' 카테고리의 다른 글

Spring 파일 업로드  (0) 2019.11.20
2019/10/17 mymelon  (0) 2019.10.17
2019/10/16 Ajax 사용법  (0) 2019.10.16
2019/10/16 Maven 라이브러리 다운 방법  (0) 2019.10.16
2019/10/16 Spring 로그인 폼  (0) 2019.10.16
Contents

당신이 좋아할만한 콘텐츠

댓글 0

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

SHARE

DARK

MENU

티스토리툴바