21.01.21 JSPCommunity 프로젝트(ajax활용 아이디 중복체크 기능 추가, 메인화면 템플릿 적용)
2021. 1. 21. 17:58ㆍJAVA/JSP Community 사이트 프로젝트
<doJoinForm.jsp>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="pageTitle" value="신규 회원 가입" />
<%@ include file="../../part/head.jspf"%>
<h1>${pageTitle}</h1>
<script>
//변수명과 함수명이 같으면 에러발생!!
let checkedDupId = "";
// 중복체크
function checkDupId(el){
//가장 근접한 'form'을 가져오기
//$(el).parent.parent.parent 방식으로 부모를 찾아도 됨
const form = $(el).closest('form').get(0);
const loginId = form.loginId.value;
//ajax 통신으로 보내고 데이터 받기
$.get(
'getLoginIdDup', //요청할 주소
{
// loginId:loginId도 맞다
// 최신 JS에서는 이 방식이 가능함
loginId:loginId
},
function(data){
if( data.code.substring(0,2) == "S-"){
alert(data.msg + " (" + data.code + ")");
checkedDupId = data.loginId;
}
else{
alert(data.msg + " (" + data.code + ")");
// alert();
}
},
'json'
);
};
// 폼 공백 체크
function check(form) {
if (form.loginId.value.trim().length == 0) {
alert("ID를 입력해주세요.");
form.loginId.focus();
return;
}
if (form.loginId.value != checkedDupId) {
alert("먼저 ID 중복 검사를 해주세요.");
form.dupIdCheck.focus();
return false;
}
if (form.loginPw.value.trim().length == 0) {
alert("PW를 입력해주세요.");
form.loginPw.focus();
return;
}
if (form.loginPw.value != form.loginPwConfirm.value) {
alert("PW가 일치하지 않습니다. PW를 확인해 주세요.");
form.loginPwConfirm.focus();
return;
}
if (form.name.value.trim().length == 0) {
alert("이름을 입력해주세요.");
form.name.focus();
return;
}
if (form.nickname.value.trim().length == 0) {
alert("닉네임을 입력해주세요.");
form.nickname.focus();
return;
}
if (form.email.value.trim().length == 0) {
alert("e-mail을 입력해주세요.");
form.email.focus();
return;
}
if (form.cellPhoneNo.value.trim().length == 0) {
alert("연락처를 입력해주세요.");
form.cellPhoneNo.focus();
return;
}
form.submit();
};
</script>
<form name="form" onsubmit="check(this); return false;" action="doJoin" method="POST">
<span>로그인 ID</span>
<br />
<input type="text" name="loginId" maxlength="50" placeholder="ID 입력">
<button name="dupIdCheck" onclick="checkDupId(this);" type = "button">중복체크</button>
<br />
<span>로그인 PW</span>
<br />
<input type="password" name="loginPw" maxlength="50"
placeholder="PW 입력">
<br />
<span>로그인 PW 확인</span>
<br />
<input type="password" name="loginPwConfirm" maxlength="50"
placeholder="PW 입력">
<br />
<span>이름</span>
<br />
<input type="text" name="name" maxlength="50" placeholder="이름 입력">
<br />
<span>닉네임</span>
<br />
<input type="text" name="nickname" maxlength="50" placeholder="닉네임 입력">
<br />
<span>E-Mail</span>
<br />
<input type="email" name="email" maxlength="100"
placeholder="이메일 주소 입력">
<br />
<span>연락처</span>
<br />
<input type="number" name="cellPhoneNo" maxlength="50"
placeholder="연락처 입력">
<br />
<hr />
<input type="submit" value="회원가입">
<button type="button" onclick="history.back();">뒤로가기</button>
</form>
<%@ include file="../../part/foot.jspf"%>
<UsrMemberController.java>
// 회원가입 폼 작성 시 ajax로 중복체크
public String getLoginIdDup(HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> rs = new HashMap<>();
String loginId = request.getParameter("loginId");
Member member = memberService.getMemberByLoginId(loginId);
String code = null;
String msg = null;
if(member == null) {
code = "S-1"; //S = success의 약자, 숫자는 유형 개념
//1이면 일반적인 성공, 2이면 약간 문제는 있지만 성공? 이런 방식
msg = "해당 ID는 사용이 가능합니다.";
}
if(member != null){
code = "F-1";
msg = "해당 ID는 이미 사용중입니다.";
}
if(loginId.trim().length() == 0){
code = "F-2";
msg = "해당 ID는 사용이 불가능합니다.";
}
rs.put("loginId", loginId);
rs.put("code", code);
rs.put("msg", msg);
//rs 맵리스트를 json방식으로 생성해서 data로 보내기
request.setAttribute("data", Util.getJsonText(rs));
return "common/pure";
}