[AJAX] #3 - ajax로 ID 중복확인 하기(쿠키 사용)

1. ID 중복확인하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>idCheck.jsp</title>
	<script src="../js/jquery-3.6.1.min.js"></script>
	<script src="../js/jquery.cookie.js"></script>
</head>
<body>
	
	<h3>회원 등록 폼</h3>
	<form name="memfrm">
		<table border="1" width="400px">
		<tr>
			<th>아이디</th>
			<td>
				<input type="text" id="userid">
				<input type="button" value="아이디중복확인" id="btn_userid">    
				<br>
				<div id="panel" style="display:none"></div>
			</td>
		</tr>
		</table>
	</form>

</body>
</html>

아이디 중복확인 버튼을 누르면 panel 이란 아이디를 가진 div 공간에 중복확인 결과를 출력 시켜보자.

1) $.post() / $.serialize() : 아이디 중복확인하기

- 형식

$.post("요청명령어",전달값,callback함수)

- 구현 1) : jsp 페이지 코딩

$("#btn_userid").click(function(){
    $.post(
             "idcheckproc.do"				// 요청 명령어
            ,"userid="+ $("#userid").val()	// 전달값
            ,responseProc					// 콜백함수
            );
}); // click() end

function responseProc(result){
    $("#panel").empty();
    $("#panel").html(result);
    $("#panel").show();
}; // responseProc() end

- 구현 2) : 컨트롤러 생성

// 아이디 중복확인 페이지 불러오기
// 결과 확인 http://localhost:9095/member/idcheckform.do
@RequestMapping("idcheckform.do")
public String idCheckForm() {
    return "/member/idCheck";
} // idCheckForm() end

@ResponseBody
@RequestMapping("idcheckproc.do")
public String idCheckProc(HttpServletRequest req) {
    String userid = req.getParameter("userid");
    String message = "";

    if(userid.length()<5 || userid.length()>15) {
        message = "<span style='color:blue;font-weight:bold;'>아이디는 5~15글자 이내로 입력해주세요!</span>";
    } else {
        if(userid.equals("itwill") || userid.equals("webmaster")) {
            message = "<span style='color:red;font-weight:bold;'>중복된 아이디입니다!</span>";
        } else {
            message = "<span style='color:green;font-weight:bold;'>사용 가능한 아이디입니다</span>";
        } // if end			
    } // if end
    return message;
} // idCheckProc() end

2) cookie : 중복확인을 한 아이디의 쿠키를 저장하여 회원가입 페이지로 연결시키게 하기

우리는 회원가입을 할 때 중복확인을 통과한 사람만 회원가입을 진행할 수 있게 하려 한다.

이 때 위의 과정을 통해 사용자가 중복확인을 눌러서 사용가능한 아이디라는 결과를 받은 값을 쿠키로 저장하는 것이 필요하다.

jQuery에서는 이 쿠키를 손쉽게 사용할 수 있도록 구현해두었기에 이를 잘 사용해보고자 한다.

- 구현 1) : JSP 페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>idCheck_cookie.jsp</title>
	<script src="../js/jquery-3.6.1.min.js"></script>
	<script src="../js/jquery.cookie.js"></script>
</head>
<body>
	<!-- 쿠키를 활용하여 아이디 중복확인을 해야만 회원가입이 가능하다 -->	
	<h3>회원 등록 폼(cookie)</h3>
	
	<form>
		<table border="1" width="400px">
		<tr>
			<th>아이디</th>
			<td>
				<input type="text" name="userid" id="userid">
				<input type="button" value="아이디중복확인" id="btn_userid">
				<br>
				<span id="panel"></span><!-- 아이디 중복 관련 메세지 -->
			</td>
		</tr>
		<tr>
			<th>비밀번호</th>
			<td><input type="password" name="passwd"></td>
		</tr>
		<tr>
			<th>이름</th>
			<td><input type="text" name="name"></td>
		</tr>
		<tr>
			<th>이메일</th>
			<td><input type="text" name="email"></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="회원가입">
			</td>
		</tr>
		</table>
	</form>

	<script>
	// 1) id="btn_userid" 아이디 중복확인 버튼이 클릭 되었을 때
	$("#btn_userid").click(function(){
		// 2) 입력한 id="btn_userid" 값을 변수에 대입하기
		let params = "userid=" + $("#userid").val().trim();
		
		// 3) post 방식으로 서버에 요청해서 응답받기
		//  -> 형식 : $.post("요청 명렁어", 전달값, 콜백함수, 응답 받는 형식)
	    $.post("idcheckcookieproc.do", params, checkID, "text");
		
		
	}); // click() end

	// 4) 콜백 함수
	function checkID(result){
	    alert(result);
	} // checkID() end
	</script>

</body>
</html>

- 구현 2) : 컨트롤러 생성

// 쿠키를 활용하여 아이디를 중복확인해야만 회원가입을 할 수 있다.
// 결과 확인 http://localhost:9095/member/idcheckcookieform.do
@RequestMapping("idcheckcookieform.do")
public String idcheckcookieform() {
    return "/member/idCheck_cookie";
} // idcheckcookieform() end

@ResponseBody
@RequestMapping("idcheckcookieproc.do")
public String idCheckCookieProc(HttpServletRequest req) {
    String userid = req.getParameter("userid").trim();

    String cnt = "0";
    if(userid.equals("itwill") || userid.equals("webmaster")) {
        cnt = "1";
    } // if end
    return cnt;

} // idCheckCookieProc() end

- 구현 3) : JSON으로 접근하기

여기서 return값을 int로 줘도 무방하지만 JSON을 사용하여 응답하는 것도 가능하기에 이를 확인하고자 String 값을 주었다.

- .jsp 페이지 수정

    // ② JSON 응답
    $.post("idcheckcookieproc.do", params, checkID, "json");

- 컨트롤러 수정

//		2) JSON 응답-----------------------------------------------------
//		https://mvnrepository.com에서 json-simple 검색 후 pom.xml에 의존성을 추가해야 한다.
JSONObject json = new JSONObject();
json.put("count", cnt); // Key, Value
return json.toString();

- 콜백 함수 checkID() 수정

// 		② json 응답
alert(result); // [object Object] 또는 {"count":1} 
alert(result.count); // 0 또는 1

- 구현 4) : 쿠키에 아이디 저장하기

콜백 함수인 checkID() 수정

// 5) 서버에서 응답받는 메세지(result)를 본문의 id=panel에 출력하고, 쿠키변수를 저장
// 	형식 : $.cookie("쿠키변수명", 값)
let count = eval(result.count); // 형변환
if(count==0){
    $("#panel").css("color", "blue");
    $("#panel").text("사용 가능한 아이디 입니다");
} else {
    $("#panel").css("color", "red");
    $("#panel").text("중복된 아이디 입니다");
} // if end

- <form>의 속성 추가

<form name="memfrm" method="post" action="./insert.do" onsubmit="return send()">

- function 추가 1) 페이지를 리로딩하면 쿠키 삭제하기 : 만약 중복확인은 했으나 페이지를 새로 불러서 새로운 아이디를 쓸 수도 있기 때문에

// 6) 해당 페이지가 로딩되었을 때 아이디 중복확인과 관련된 쿠키를 삭제해주기
$(function (){
    $.removeCookie("checkID");		
}); // end

- function 추가 2) 아이디 중복확인을 해야만 회원가입폼이 서버로 전송

// 7) 아이디 중복확인을 해야만 회원가입폼이 서버로 전송
function send() {
    // 아이디 입력했는지?
    if($("#userid").val()==""){
        alert("아이디를 입력해주세요")
        $("#userid").focus();
        return false;
    } // if end

    // 비밀번호 입력했는지?
    if($("#passwd").val()==""){
        alert("비밀번호를 입력해주세요")
        $("#passwd").focus();
        return false;
    } // if end

    // 이름 입력했는지?
    if($("#name").val()==""){
        alert("이름을 입력해주세요")
        $("#name").focus();
        return false;
    } // if end

    // 이메일 입력했는지?
    if($("#email").val()==""){
        alert("이메일을 입력해주세요")
        $("#email").focus();
        return false;
    } // if end

    // 아이디 중복확인 했는지
    let checkID = $.cookie("checkID"); // 쿠키값 가져오기
    if(checkID=="PASS"){
        return true;
    } else {
        $("#panel").css("color", "green");
        $("#panel").text("아이디 중복 확인 해주세요");
        $("#userid").focus();
        return false;
    } // if end

} // send() end

3) insert.do 명령어를 사용하여 콘솔창에 결과 출력시키기

@RequestMapping(value = "insert.do", method = RequestMethod.POST)
public void insert(HttpServletRequest req) {

    System.out.println("아이디 : " + req.getParameter("userid"));
    System.out.println("비번 : " + req.getParameter("passwd"));
    System.out.println("이름 : " + req.getParameter("name"));
    System.out.println("이메일 : " + req.getParameter("email"));

} // insert() end

저작자표시 비영리 동일조건

'⁂ AJAX > : 기본 익히기' 카테고리의 다른 글

[AJAX] #5 - 검색 기능 구현하기 (0)	2022.11.10
[AJAX] #4 - AJAX로 사진 띄우기 (0)	2022.11.09
[AJAX] #2 AJAX 기본 문법 뜯어보기 (0)	2022.11.09
[AJAX] #1 AJAX의 이해 (0)	2022.11.09

'⁂ AJAX > : 기본 익히기' 카테고리의 다른 글

티스토리툴바