VIEW 페이지
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idCheck</title>
<script src="../js/jquery-3.6.4.min.js"></script>
<script src="../js/jquery.cookies.js"></script>
</head>
<body>
<h3>회원등록폼</h3>
<form>
<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>
<script>
$("#btn_userid").click(function(){
//alert();
$.post("idcheckproc.do","userid=" + $("#userid").val().trim(),responseProc);
// 요청 명령어,전달값, callback 함수
});
function responseProc(result) {
$("#panel").empty();
$("#panel").html(result);
$("#panel").show();
}
</script>
</body>
</html>contoller
package kr.co.ajax.member;
import javax.servlet.http.HttpServletRequest;
import org.json.simple.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/member")
public class MemberCont {
public MemberCont() {
System.out.println("MemberCont()객체 생성");
}
//http://localhost:9095/member/idcheckform.do
@RequestMapping("idcheckform.do")
public String idcheckForm() {
return "member/idCheck";
}
@RequestMapping("idcheckproc.do")
@ResponseBody
public String idCheckProc(HttpServletRequest req) {
String userid = req.getParameter("userid").trim();
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
return message;
}
cookie를 이용한 회원등록 폼
view page
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>idCheck_cookie</title>
<script src="../js/jquery-3.6.4.min.js"></script>
<script src="../js/jquery.cookies.js"></script>
</head>
<body>
<!-- 쿠키는 지워도 상관이 없는 값들 -->
<!-- 쿠키를 통해서 아이디 중복확인을 해야만 회원가입이 가능 -->
<h3>회원등록폼(cookie)</h3>
<form name="memfrm" method="post" action="insert.do" onsubmit="return send()">
<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>
// 페이지가 로딩이 된 경우 아이디 중복과 관련된 쿠키변수 삭제
// 데이터의 중복을 방지하기 위함!
$(function(){
$.removeCookie("checkID");
});
///////////////////////////////////////////////////////////////////////
//아이디 중복확인 버튼을 클릭한 경우
$("#btn_userid").click(function(){
//입력한 값을 변수에 대입
let params="userid=" + $("#userid").val().trim();
// post방식으로 서버에 요청해서 응답
//$.post("idcheckcookieproc.do",params,checkID,"text");
//json
$.post("idcheckcookieproc.do",params,checkID,"json");
});
function checkID(result) {
//alert(result); text
//json
//alert(result);
//alert(result.count); //itwill, webmaster= 1
//서버에서 응답받는 메세지를 본문의 id=panel에 출력하고, 쿠키변수에 저장
//$.cookie("쿠키변수명",값)
let count=eval(result.count);//형변환
if(count==0) {
$("#panel").css("color","blue");
$("#panel").text("사용 가능한 아이디입니다");
$.cookie("checkID", "PASS"); //아이디 중복 확인 완료
}else{
$("#panel").css("color","red");
$("#panel").text("아이디 중복!");
$("#userid").focus();//커서 생성
}
}
//ID 중복 확인이 되어야만 회원가입 폼이 서버로 전송
function send() {
//비번? 아이디? 이름? 이메일?
//아이디 중복확인을 했는가?
let checkID=$.cookie("checkID"); //쿠키 변수 가져오기
if(checkID=="PASS"){
return true;
}else{
$("#panel").css("color","green");
$("#panel").text("아이디 중복확인 필요!");
$("#userid").focus();
return false;
}
}
</script>
</body>
</html>
controller
//쿠키를 활용하여 아이디 중복확인을 해야만 회원 가입이 가능하다
@RequestMapping("idcheckcookieform.do")
public String idCheckCookieForm() {
return "/member/idCheck_cookie";
}
@RequestMapping("idcheckcookieproc.do")
@ResponseBody
public String idCheckCookieProc(HttpServletRequest req) {
String userid=req.getParameter("userid").trim();
String cnt="0";
if (userid.equals("itwill") || userid.equals("webmaster")) {
cnt="1";//중복
}
//text 응답
//return cnt;
//json 응답
//pom.xml에 라이브러리 추가 필수
JSONObject json=new JSONObject();
json.put("count", cnt); //key,value
return json.toString();
}
@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"));
}//
