반응형
1. AJAX 미사용
join.jsp (id중복체크 버튼)
<input type = "button" value = "id중복체크" onclick = "idcheck()">
IdCheck.java (객체 생성해 아이디 비교 후 true,false 결과값 도출)
| String id = request.getParameter("id"); MemberService service = new MemberService(); MemberVo vo = service.getMember(id); |
서비스 객체를 생성해서 서비스의 getMember 기능 사용. => 아이디(id) 검색 |
boolean flag = (vo==null); request.setAttribute("flag", flag); |
만약, vo가 null 이면 null == null :true 값이 나온다. 반대의 경우엔 false. flag를 setAttribute로 보낸다. |
| if (flag) { request.setAttribute("id", id); } |
id가 중복되지 않았다면,( if(flag)는 true일때만 실행된다.. 왜?) idcheck.jsp에 출력하기 위해서 request에 담음 |
| RequestDispatcher dis = request.getRequestDispatcher("/member/idcheck.jsp"); dis.forward(request, response); |
전송 |
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id");
MemberService service = new MemberService();
MemberVo vo = service.getMember(id); //id로 검색
boolean flag = (vo==null); // null == null: true, 즉, 중복되지 않으면 true, 중복되면 false를 변수에 담는다
request.setAttribute("flag", flag); //flag:id중복여부
if (flag) { //id가 중복되지 않았다면
request.setAttribute("id", id); //idcheck.jsp에 출력하기 위해서 request에 담음
}
RequestDispatcher dis = request.getRequestDispatcher("/member/idcheck.jsp");
dis.forward(request, response);
}
idcheck.jsp
<head> <script>
| 1 | window.onload = function() { if ('${pageContext.request.method}' == 'GET') { ff.id.value = opener.document.f.id.value; |
윈도우가 열리자마자 (window.onload) 페이지 실행 페이지의 전송 방식이 GET일 때 실행한다. - 이전 페이지에서 get 메소드로 보내기 때문에 무조건 처음에 이 코드를 실행한다. # 아이디가 팝업창의 파라메터에 옮겨지도록 하는 코드이다. * request.method : 전송 방식 값을 갖는 속성 (GET,POST) |
| 4 | } else { let html = ""; |
method 가 post일 때 실행한다. 즉, method 방식으로 보낸 submit 버튼으로 member/idcheck -> idcheck.jsp로 이동했을 때 실행된다. |
| 5 | if ('${flag}' == 'true') { html = "사용가능한 아이디"; |
서블릿에서 flag 정보를 받아와 중복체크 버튼을 클릭했을 때, flag 가 true 일 때 (null) 사용 가능한 아이디로 나타난다. |
| 6 | let val = '${id}'; ff.id.value = val; |
id 값을 form의 id의 value 로 나타낸다. |
| 7 | html += "<input type = 'button' value = '아이디사용' onclick = 'a(\""+val+"\")'>"; } else { html = "중복된 아이디"; } |
아이디 사용 버튼을 클릭하면 function a(id)를 표시한다. 이외의 경우는 중복된 아이디 (!=null)로 표시한다. |
| 8 | let div = document.getElementById("res"); div.innerHTML = html; } } |
나온 결과값을 div 영역에 나타낸다. |
| 10 |
function a(id) {
opener.document.f.id.value = id; close(); } |
팝업을 띄운 회원가입 페이지에 사용자가 선택한 아이디 값을 넣고 현재 윈도우창을 닫는다. |
<body>
| 2 | <form action="${pageContext.request.contextPath }/member/idcheck" method="post" name="ff"> | form 의 submit 버튼을 눌렀을 때 member/idcheck 서블릿 파일에 post 메소드 방식으로 이동하도록 한다. |
| 3 | id : <input type="text" name="id"> <input type="submit" value="중복 체크"> </form> |
아이디 입력창 text, submit 버튼. |
| 9 |
<div id='res'></div>
|
div 영역 |
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
if ('${pageContext.request.method}' == 'GET') {
ff.id.value = opener.document.f.id.value;
} else { //method 가 post일 때
let html = "";
if ('${flag}' == 'true') {
html = "사용가능한 아이디";
let val = '${id}';
ff.id.value = val;
html += "<input type = 'button' value = '아이디사용' onclick = 'a(\""+val+"\")'>";
} else {
html = "중복된 아이디";
}
let div = document.getElementById("res");
div.innerHTML = html;
}
}
function a(id) {
opener.document.f.id.value = id;
close();
}
</script>
</head>
<body>
<h3>id 중복체크</h3>
<form action="${pageContext.request.contextPath }/member/idcheck"
method="post" name="ff">
id : <input type="text" name="id"> <input type="submit" value="중복 체크">
</form>
<div id='res'></div>
</body>
</html>
<body>
<h3>id 중복체크</h3>
<form action="${pageContext.request.contextPath }/member/idcheck"
method="post" name="ff">
id : <input type="text" name="id"> <input type="submit"
value="중복 체크">
</form>
<div id='res'></div>
</body>
2. AJAX, JSON 사용
join2.jsp
| 1 | <input type = "text" name = "id"> | |
| 2 | <input type = "button" value = "id중복체크" onclick = "idcheck()"> | |
| <span id="res"></span> |
<input type = "text" name = "id">
<input type = "button" value = "id중복체크" onclick = "idcheck()">
<span id="res"></span>
| 3 | const xhttp = new XMLHttpRequest(); let param = "?id=" + f.id.value; xhttp.open("GET", "${pageContext.request.contextPath}/member/idcheckajax"+param); xhttp.send(); |
id를 받아서 서블릿으로 보내준다. |
| 8 | xhttp.onload = function(){ | xhttp.onload = function() 설명 |
| 9 | let val = xhttp.responseText; | (7)에서 응답을 받아와 변수 val 에 담는다. |
| 10 | let html = '<h4 style="color:'; let obj = JSON.parse(val); |
담은 값을 JSON.parse 이용하여 파싱한다. |
| 11 | if(obj.flag){ html += 'blue">사용 가능한 아이디 </h4>'; }else{ html += 'red"> 사용 불가능한 아이디 </h4>'; } |
if(obj.flag) -> obj가 true 일 경우 진행 <h4 style="color:blue"> 사용 가능한 아이디 else <h4 style="color:red"> 사용 불가능한 아이디 |
| 12 | let res = document.getElementById("res"); res.innerHTML = html; } |
id 가 res 인 공간을 불러와 html의 내용을 읽어 넣어준다. |
function idcheck(){
const xhttp = new XMLHttpRequest();
let param = "?id=" + f.id.value; // url을 붙이기 때문에 ? 붙임
xhttp.open("GET", "${pageContext.request.contextPath}/member/idcheckajax"+param);
xhttp.send();
xhttp.onload = function(){
let val = xhttp.responseText;
alert(val);
let html = '<h4 style="color:';
let obj = JSON.parse(val);
if(obj.flag){ //obj.flag 가 true면 진행
html += 'blue">사용 가능한 아이디 </h4>';
}else{
html += 'red"> 사용 불가능한 아이디 </h4>';
}
let res = document.getElementById("res");
res.innerHTML = html;
}
}
IdCheckAjax.java
| 4 | String id = request.getParameter("id"); MemberService service = new MemberService(); MemberVo vo = service.getMember(id); |
아이디를 받아오고, 서비스 객체로 아이디를 검색한다. |
| 5 | boolean flag = (vo == null); | 검색한 아이디 중복 여부를 확인한다. (if vo = null, null==null : true) |
| 6 | JSONObject obj = new JSONObject(); obj.put("flag", flag); |
새로운 JSONObject(객체) 를 생성한다. boolean 에서 받아온 true, false 를 JSON으로 화면에 출력한다. |
| 7 | String txt = obj.toJSONString(); response.getWriter().append(txt); |
toJSONString 으로 JSON 형태의 문자열로 변환한다. 메세지를 온전한 형태로 보내기 위해 객체 (txt)에 담아 보낸다. |
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id");
MemberService service = new MemberService();
MemberVo vo = service.getMember(id);
boolean flag = (vo == null);
JSONObject obj = new JSONObject(); //{}
obj.put("flag", flag); //{"flag":true}
String txt = obj.toJSONString();
response.getWriter().append(txt);
}
[Servlet/Java/Oracle] 회원 관리 기능 만들기
Servlet, Java, Oracle 을 이용해 회원 관리 기능을 구현하였다. 회원가입 기능 [Servlet] Join 회원가입, 회원 기능 만들기 Join 기능을 만들려면 Join.Java (Servlet 파일), join.jsp, index.jsp 파일이 필요하다. index.
skylarcoding.tistory.com
반응형
