JAVA
회원등록(jsp버전)
docc
2021. 7. 25. 00:23
1. 우편번호&주소, 아이디중복
JavaScript 사용 ( API 없이 간략하게 해보기 )
window.open(): 창하나를 연다. 이 때 열어준 창을 부모창, 열린 창을 자식창이라고 한다.
부모창에서 주소창으로 들어가고,
주소창(자식창)을 띄워 주소를 선택하면 부모창에 값이 가도록 해야한다.
이때 사용하는 속성이 opener // 열어준 사람
opener.부모창의메서드();
//이렇게 부모창에 접근가능하다.https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
다음 우편번호 API 를 이용해 우편번호 검사하면 된다.(나중에 따로해볼것)
>> 회원등록준비.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>
</head>
<body>
<center>
<form action="" method="post">
<h1>회원등록</h1>
<!--기초내용 -->
성명 <input type = "text" name = "name"><br>
우편번호 <input type = "text" name = "post" id="name" readonly="readonly"><input type="button" onclick="조회창을띄우다()" value="조회"><br>
주소 <input type = "text" name = "address" id="address" readonly="readonly"> <br>
상세주소 <input type = "text" name = "address" readonly="readonly"> <br>
아이디 <input type="text" name="id" id="id" readonly="readonly"> <input type="button" onclick="아이디중복검사창을띄우다()" value="조회">
</form>
</center>
</body>
</html>
<script>
function 조회하다(){
var 목록 = [{post:"1234",address:"서울시 구로구 대륭1차"},
{post:"1235",address:"서울시 구로구 대륭2차"},
{post:"1236",address:"서울시 구로구 대륭3차"}];
var addresslist = document.querySelector("#addresslist");
for(var i = 0; i < 목록.length; i++){
var li1 = document.createElement("li");
var text1 = document.createTextNode(목록[i].post);
var text2 = document.createTextNode(목록[i].address);
li1.appendChild(text1);
li1.appendChild(text2);
addresslist.appendChild(li1);
var ss = function(){
//this = 이 함수를 쓸 객체를 가리킴.
/* var li = this;
let 우편번호 = li.childNodes[0].nodeValue;
let 주소 = li.childNodes[1].nodeValue; */
let 우편번호 = this.childNodes[0].nodeValue;
let 주소 = this.childNodes[1].nodeValue;
alert(우편번호);
alert(주소);
//부모창
opener.주소를받다(우편번호,주소);
self.close();
};
li1.addEventListener("dblclick",ss);
}
}
</script>
<script>
function 아이디중복검사창을띄우다(){
window.open("아이디중복검사.jsp","","width=450,height=300");
}
function 아이디를받다(id){
let txtID = document.querySelector("#id");
txtID.value = id;
}
</script>>> 우편번호조회.jsp (자식창)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>우편 번호 조회</title>
</head>
<body>
<h1>우편 번호 조회</h1>
주소 <input type="text" name="adress"'/> <button onclick="주소찾다()">조회</button><br>
<!-- 찾은 주소들 출력 -->
<ul id="addresslist"></ul>
</body>
</html>
<script>
function 주소찾다(){
var 찾은주소들=[{post:"1234", address:"서울시 구로구 대륭1차"},
{post:"1235", address:"서울시 구로구 대륭2차"},
{post:"1236", address:"서울시 구로구 대륭3차"}];
var addresslist = document.querySelector("#addresslist");
for(var c = 0; c < 찾은주소들.length; c++){
var li1 = document.createElement("li");
var 주소 = 찾은주소들[c];
var text1= document.createTextNode(주소.post);
li1.appendChild(text1);
var text2= document.createTextNode(주소.address);
li1.appendChild(text2);
addresslist.appendChild(li1);
var ss =function(){
var li = this;
var textNode1 = li.childNodes[0];
var textNode2 = li.childNodes[1];
let 우편번호 = textNode1.nodeValue;
let 주소 = textNode2.nodeValue;
alert(textNode1.nodeValue);
alert(textNode2.nodeValue);
//부모창
opener.주소를받다(우편번호,주소);
self.close();
};
li1.addEventListener("dblclick",ss);
}
}
</script>>>아이디중복검사.jsp(자식창)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="membermanage.*"%>
<%
// 맨처음은 당연히 null, 사용자가 입력시 다시 이 페이지로 데이터들이 submit되어 action가능하게됨
// 그러면 String 아이디에 값이 들어감
// 하지만 submit 해버렸기 때문에 아이디에 값이 사라져버린다.(request만 받는다.)
String 아이디 = request.getParameter("id");
boolean 사용가능여부 = false;
String 메세지 = "";
if(아이디 == "") {
메세지 = "아이디를 입력하세요.";
}else if(아이디 != null){
회원DAO dao = new 회원DAO();
사용가능여부 = dao.아이디가사용가능한가(아이디);
// 아이디 중복검사(일단 가상으로)
메세지 = (사용가능여부)?"사용가능한 ID입니다.":"이미 사용 중인 ID입니다.";
}
//
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 검사</title>
</head>
<body>
<form action="아이디중복검사.jsp" method="post">
아이디 <input type="text" name="id" id="id" value="<%=(아이디!=null)?아이디:"" %>"/> <input type="submit" value="검사">
</form>
<%-- 결과 출력 --%>
<%= 메세지 %>
<%if(사용가능여부){ %>
<br> <button onclick="id를보내다()">사용</button>
<%} %>
<button onclick ="self.close()">취소</button>
</body>
</html>
<script>
function id를보내다(){
let txtId = document.querySelector("#id");
let id = txtId.value;
alert(id);
opener.아이디를받다(id);
close();
}
</script>