① JSP 페이지
<%@ 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 {
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; //그 팝업창에 떠 있는 id 의 값이 f.id 의 value 값으로 들어간다.
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>
<%-- 서브밋을 눌러야 servlet으로 가서 post 방식으로 가야 ${flag} 값을 받아 온다. --%>
<div id = 'res'>
</div>
</body>
</html>● window.onload = function()
시작하자마자 바로 로드 될 수 있는 함수를 하나 만든다.
● if ('${pageContext.request.method }' == 'GET')
request.method : 전송방식 method의 get이나 post 값을 갖는 속성이다.
● ff.id.value = opener.document.f.id.value;
이 코드는 팝업창이 뜨자마자 입력한 아이디가 뜰 수 있게 작성 해 놓은 것이다.
opener : 팝업창을 띄운 주체 (여기서는 회원가입창) / openee = 팝업창을 받을 주체 (여기서는 아이디 중복체크)
오프너의 아이디 값을 팝업창이 띄어진 아이디 값에 할당을 해라.
● else { let html = ""
method가 post 일때 빈 html 을 만들어주고
● if ('${flag}'=='true') {
servlet 에서 지정한 flag 의 값이 true 라면
● html = "사용가능한 아이디";
● let val = '${id }';
val 변수에 servlet 에서 request.setAttribute("id", id); 로 입력한 아이디 값을 넣고
● ff.id.value = val;
ff.id 값에 그 값을 넣어라
● html += "<input type = 'button' value = '아이디사용' onclick='a(\"" + val + "\")'>";
그리고 html을 추가 해서 아이디 사용이라는 버튼을 눌렀따면 a (val) 함수를 실행 하게 하여라
② servlet 페이지
package member.controller;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import member.MemberService;
import member.memberVo;
/**
* Servlet implementation class idcheck
*/
@WebServlet("/member/idcheck")
public class idcheck extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public idcheck() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* 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);
//이이디로 검색하기
boolean flag = (vo == null);
// vo가 null 이면 즉, 값이 없으면 중복되지 않았다는거니까 true
//boolean flag 기본 값은 false인데 vo 가 null 인지를 확인 하고 중복 되지 않았다면 true 가 된다.
request.setAttribute("flag", flag); // 그 값을 여기에 담아서 jsp에서 구현하고
if (flag) {
request.setAttribute("id", id);
// 중복 아이디가 아니라면 아이디를 그대로 냅두고 중복 아이디라면 화면에서 없애려고
}
RequestDispatcher dis = request.getRequestDispatcher("/member/idcheck.jsp");
dis.forward(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}● boolean flag = (vo == null);
vo가 null 이면 즉, 값이 없으면 동일한 아이디가 없다는 거니까 true
● request.setAttribute("flag", flag);
그 값을 여기에 담아서 jsp에서 구현하고
● if (flag) { request.setAttribute("id", id); }
중복 아이디가 아니라면 아이디를 그대로 냅두고 중복 아이디라면 화면에서 없애려고 그래서 jsp 에서 let val = '${id }' 해당 코드가 생성 된 것이다.
'MVC > 세션과 쿠키' 카테고리의 다른 글
| 쿠키(Cookie) 기초 (0) | 2023.03.31 |
|---|---|
| Scope개념 이해하기 (1) | 2023.03.31 |
| 세션(Session) 기초 (0) | 2023.03.30 |
| 쿠키(Cookie)와 세션(Session) (0) | 2023.03.30 |
