ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 회원등록(jsp버전)
      JAVA 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>

      'JAVA' 카테고리의 다른 글

      JSP내장객체정리, 로그인하기(jsp버전)  (0) 2021.07.25
      회원등록.ver2,PreparedStatement(jsp버전)  (0) 2021.07.25
      게시물Paging+페이지블럭(jsp버전),DAO  (0) 2021.07.25
      게시물목록,상세보기,Paging(jsp버전)  (0) 2021.07.25
      게시물목록(jsp버전)  (0) 2021.07.25

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바