회원가입 아이디 중복검사, 우편번호 검색 관련, submit 수정중

jychae·2022년 10월 5일
아이디중복검사우편번호검색제이쿼리회원가입
0

제이쿼리

목록 보기
3/3

\jqpro\WebContent\WEB-INF\lib 

jquery.serializejson.min.js / 오늘초면 직렬화??
gson-2.8.5.jar / json을 위해 추가한 라이브러리? gson
ibatis-2.3.4.726.jar / 아이바티스 쓰려고!
ojdbc6.jar / jdbc 쓰려고!

join.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<!-- <link rel="stylesheet" href="../css/public.css"> -->
<script src="../js/jquery.serializejson.min.js"></script>

<script>
$(function() {
	$('#idbtn').on('click', function() {
		// 입력한 ID값 가져온다  id="uid"	 $('#uid').val
		idvalue = $('#uid').val().trim();
		
		if(idvalue.length < 1) { // 입력 안된것으로 간주
			alert("id입력하세용");
			return false; // 입력안된거 다시 리턴으로 보내야함 
		}
		
		// 서버로 전송
		$.ajax({
			url : '/jqpro/IdCheck.do',
			type : 'get',
			data : { "id" : idvalue }, //@WebServlet("/IdCheck.do") 에서 id같게 	String userId = request.getParameter("id");
			success : function(res) {
				//alert(res.flag); //사용가능 불가능?
				// html()-html요소태그있을때 , 그냥 텍스트일때/ text()-그냥 텍스트일때 / val()-input일때		
				$('#spanid').text(res.flag).css('color', 'red'); 		
						
			},
			error : function(xhr) {
				alert("상태 : " + xhr.status)
			},
			dataType :'json'
			
		})//ajax
		
	})//click
	
	$('#zipbtn').on('click', function() {
		
		//jsp는 html과 같은 요청페이지이다. 응답 페이지(view페이지)가 아니다.
		window.open("zipsearch.jsp", "우편번호", "whidth=600 height=500"); // 새창열어/ 우편번호는 논리적인 이름
		
	})
	
	// 모달은 별도의 이벤트가 없다.
	// button태그내부에 data-toggle="modal" data-target="#zipModal"
	// zipsearch.jsp를 가져와서 붙임
	
	// 모달에서 동입력후 실행 이벤트
	$('#dongbtn').on('click', function() {
		

	
	// 입력한 동을 가져온다.
	dongvalue = $('#dong').val().trim();
	if(dongvalue.length < 1){
		alert("입력하세요");
		return false;
	}
	
	//서버로 전송
		$.ajax({
			// '/jqpro/ZipSearch.do' 이렇게 써도됨!
			url : '/jqpro/ZipSearch.do',  // '<%= request.getContextPath()%>/ZipSearch.do' 이렇게 안써도 됨! 여기는 html파일이니까~
			type : 'post',
			data : { "dong" : dongvalue },
			success : function(res) {
				
				code = "<table class='table table-bordered'>"
				code += "<tr><td>우편번호</td><td>주소</td><td>번지</td></tr>"
				
				$.each(res, function(i, v) {
//					code += `<tr><td>${res[i].zipcode}</td><td>주소</td><td>번지</td></tr>`
//					code += `<tr><td>${res[i].zipcode}</td>`;
//					code += `<tr><td>${v.zipcode}</td>`;
//					code += `<td>${v.sido} ${v.gugun} ${v.dong}</td>`;
//					code += `<td>${v.bunji}</td></tr>`;
					// 백틱왜 안될까오ㅛㅇ...
					bunji = v.bunji;
					if(typeof bunji=="undefined") bunji=""; // typeof 타입! 번지의 타입이~/ undefined는 문자아닌 자료형!
					
					code += "<tr class='ziptr'><td>" + v.zipcode + "</td>";
		            code += "<td>" + v.sido + v.gugun + v.dong + "</td>";
		            code += "<td>" + bunji + "</td></tr>" //v.bunji 위에서 적용해서 나왔쥬 

					
				})
				code += "</table>"	
				$('#searchres').html(code);
				//html 태그인 tr td있으니가~
				
			},
			error : function(xhr) {
				alert("상태 : " + xhr.status)
			},
			dataType : 'json'
		})//$.ajax
	})// click
	
	// 모달에서 동 검색후 결과에서 한 행을 선택하면
	$(document).on('click', 'tr.ziptr', function() {
		//alert("OK");
		zip = $('td', this).eq(0).text(); // 'td[0]' dom객체로 변해버림
		addr = $('td', this).eq(1).text();
		
		console.log(zip, addr);
		
		//출력하기
		$('#uzip').val(zip);
		$('#uadd1').val(addr);
		
		// modal창 닫기
		$('#zipModal').modal('hide'); // 검색결과는 남아있어요! 창만 닫히는 거!		
		
		// 검색내용지우기
		$('#dong').val("");
		$('#searchres').empty();
		
	})// click
	
	
	//submit전송 이벤트
	$('form').on('submit', function() {
		//alert("form");
		
		// 입력한 모든값을 가져온다.
// 		$('#uid').val();
// 		$('#uname').val();
// 		$('#pwd').val();
// 		$('#ubir').val();
// 		$('#umail').val();
// 		$('#uhp').val();
// 		$('#uzip').val();
// 		$('#uadd1').val();
// 		$('#uadd2').val();
		
// 		vdata = "id=" + $('#uid').val() + 
// 				"&name=" + $('#uname').val() +
// 				"&pwd=" + $('#pwd').val() +
// 				"&bir=" + $('#ubir').val() +
// 				"&mail=" + $('#umail').val() +
// 				"&hp=" + $('#uhp').val() +
// 				"&zip=" + $('#uzip').val() +
// 				"&add1=" + $('#uadd1').val() +
// 				"&add2=" + $('#uadd2').val() +
				
// 		vdata = { "id" 		: $('#uid').val(),
// 				  "name"	: $('#uname').val(),
// 				  "pass"	: $('#pwd').val(),
// 				  "bir"		: $('#ubir').val(),
// 				  "mail"	: $('#umail').val(),
// 				  "hp"		: $('#uhp').val(),
// 				  "zip"		: $('#uzip').val(),
// 				  "add1"	: $('#uadd1').val(),
// 				  "add2"	: $('#uadd2').val(),
//		
//				}
		// 위에 처럼 써야하는데 안써도 가능함 ! serializejson!!!!!!!!!!!!
		
			vdata = $('form').serialize();
			console.log(vdata);
			
			vdata = $('form').serializeJSON();
			console.log(vdata);

		
		// 서버로 전송
		$.ajax({
			url : '/jqpro/Insert.do',
			type : 'post',
			data : vdata,
			success : function(res) {
				
			},
			error : function(xhr) {
				alert("상태 : " + xhr.status);
			},
			dataType : 'json'
		})
		
	})
	
	
})//$function


</script>

<style type="text/css">
	tr:hover{
		background: skyblue;
	}
</style>

</head>
<body>
	<div>
		<h3>
			
			
		</h3>

<!-- 		<input type="button" value="확인"> -->
		<div id="result1" class="container">
		
		<form  class="needs-validation" novalidate onsubmit="return false;"> <!-- action="/jqpro/Insert.do" method="post" 직접바로 안가서 안씀! -->
		  <div class="form-group">
			    <label for="uid">아이디</label>
			    <input type="button" class="btn btn-outline-info btn-sm" id="idbtn" value="중복검사">
			    <span id="spanid"></span>
			    <input type="text" class="form-control" id="uid" placeholder="Enter userid" name="mem_id" required>
			    <!-- required 이건 필수항목!!!  ///  name="mem_id" vo랑 일치하도록 만듦-->
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		
		
		  <div class="form-group">
			    <label for="uname">이름</label>
			    <input type="text" class="form-control" id="uname" placeholder="Enter username" name="mem_name" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="pwd">비밀번호</label>
			    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="mem_pass" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="ubir">생일</label>
			    <input type="text" class="form-control" id="ubir" placeholder="Enter userbir" name="mem_bir" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="umail">이메일</label>
			    <input type="text" class="form-control" id="umail" placeholder="Enter usermail" name="mem_mail" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="uhp">전화번호</label>
			    <input type="text" class="form-control" id="uhp" placeholder="Enter userhp" name="mem_hp" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="uzip">우편번호</label>
			    <input type="button" class="btn btn-success btn-sm" id="zipbtn" value="번호검색">
			    <input type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#zipModal" value="번호검색modal" >
			    <input type="text" class="form-control" id="uzip" placeholder="Enter userzip" name="mem_zip" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="uadd1">주소</label>
			    <input type="text" class="form-control" id="uadd1" placeholder="Enter useradd1" name="mem_add1" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  <div class="form-group">
			    <label for="uadd2">상세주소</label>
			    <input type="text" class="form-control" id="uadd2" placeholder="Enter useradd2" name="mem_add2" required>
			    <div class="valid-feedback">Valid.</div>
			    <div class="invalid-feedback">Please fill out this field.</div>
		  </div>
		  
		  
		  
		  <div class="form-group form-check">
		   	    <label class="form-check-label">
		        <input class="form-check-input" type="checkbox" name="remember" required> I agree on blabla.
		        <div class="valid-feedback">Valid.</div>
		        <div class="invalid-feedback">Check this checkbox to continue.</div>
		        </label>
		  </div>
		  
		  <button type="submit" class="btn btn-primary btn-lg">Submit</button>
		</form>
		
		
		
		</div>

	</div>
	
	

	
	
<!-- The Modal -->
<div class="modal" id="zipModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div>
			동입력<input type="text" id="dong">
		  	<input type="button" value="확인" id="dongbtn">
		  	
		  	<br><br>
		  	<div id=searchres></div>
	  	
	 	</div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>	
	
	
	
	
</body>
</html>

@WebServlet("/IdCheck.do")

package kr.or.ddit.member.controller;

import java.io.IOException;
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 kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;

/**
 * Servlet implementation class IdCheck
 */
@WebServlet("/IdCheck.do")
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
		
		// 0. 클라이언트 전송시 id값을 받는다
		String userId = request.getParameter("id");
		
		// 1. service 객체 얻기
		IMemberService service = MemberServiceImpl.getService();
		
		// 2. 메소드 호출 - 결과값 받기
		String result = service.idSearch(userId);
		// a001을 입력 - 결과 a00l
		// korea를 입력 - 결과 null
		
		// 3. requestㅇ에 저장
		request.setAttribute("hahihuheho", result);
		
		// 4. view 페이지 이동
		request.getRequestDispatcher("1004/idcheck.jsp").forward(request, response);
		
		
		
	}

}

idcheck.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%

// 서블릿에서 저장된 데이타 꺼내기
  String res = (String) request.getAttribute("hahihuheho");
  
  if(res != null){
	  //사용불가능
%> 

	{
		"flag"	: "사용불가능 아이디"
	}
 	  
<%	  
  }else{
	  //사용가능
%>

	{
		"flag"	: "사용가능 아이디"
	}
	 
<% 
  }

%>

@WebServlet("/ZipSearch.do")

package kr.or.ddit.member.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 com.google.gson.Gson;

import kr.or.ddit.member.service.IMemberService;
import kr.or.ddit.member.service.MemberServiceImpl;
import kr.or.ddit.member.vo.ZipVO;

/**
 * Servlet implementation class ZipSearch
 */
@WebServlet("/ZipSearch.do")
public class ZipSearch extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ZipSearch() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		request.setCharacterEncoding("utf-8"); // 이거안하면 한글 깨진당
		
		/*
		// 0. 클라이언트에서 요청시 전송되는 값을 받는다.- dongvalue
		String dong = request.getParameter("dongvalue"); // zipsearch.jsp의 data : { "dongvalue" : dongvalue }, ({"키" : 값}) 이거의 키값! 키값 받아서 넣고~! 
		
		// 1. service객체 얻기
		IMemberService service = MemberServiceImpl.getService();
		
		// 2. 메소드 호출 - 결과값 받기
		List<ZipVO> list = service.selectZipcode(dong);
				
		
		// 3. request.에 저장
		request.setAttribute("dongdong", list);
		
		// 4. view페이지로 이동
		request.getRequestDispatcher("1004/zipResult.jsp").forward(request, response);
		*/
		
//--------------------------------------------------------------------------
		
		// 0. 클라이언트에서 요청시 전송되는 값을 받는다.- dongvalue
			String dong = request.getParameter("dong"); // zipsearch.jsp의 data : { "dongvalue" : dongvalue }, ({"키" : 값}) 이거의 키값! 키값 받아서 넣고~! 
				
		// 1. service객체 얻기
			IMemberService service = MemberServiceImpl.getService();
				
		// 2. 메소드 호출 - 결과값 받기
			List<ZipVO> list = service.selectZipcode(dong);
			
		//json데이타 생성
			response.setContentType("application/json; charset=utf-8"); 
			PrintWriter  out = response.getWriter();
			
			Gson  gson = new Gson();
			String result = gson.toJson(list); 
				
			out.print(result);
	}

}

zipsearch.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>

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" href="../css/public.css">

<style type="text/css">
	tr:hover{
		background: skyblue;
	}
</style>

<script>
//jsp 요청페이지 이다. view페이지 아니다.
$(function() {
	
	// 동 검색후 결과에서 한 행을 선택하면
	$(document).on('click', 'tr.ziptr', function() {
		//alert("OK");
		zip = $('td', this).eq(0).text(); // 'td[0]' dom객체로 변해버림
		addr = $('td', this).eq(1).text();
		
		console.log(zip, addr);
		
		//부모창으로 출력하기
		$('#uzip', opener.document).val(zip);
		$('#uadd1', opener.document).val(addr);
		
		window.close();
		
		
	})
	/* 이벤트 메소드 바인드bind.델리게이트delegate */
	/* 이거 잘 기억하셔야해요~ */
	
	
	// 동입력후 실행 이벤트
	$('#dongbtn').on('click', function() {
		

	
	// 입력한 동을 가져온다.
	dongvalue = $('#dong').val().trim();
	if(dongvalue.length < 1){
		alert("입력하세요");
		return false;
	}
	
	//서버로 전송
		$.ajax({
			// '/jqpro/ZipSearch.do' 이렇게 써도됨!
			url : '<%= request.getContextPath()%>/ZipSearch.do', /* request.getContextPath() 프로젝트명 가져오지 */
			type : 'post',
			data : { "dong" : dongvalue },
			success : function(res) {
				
				code = "<table class='table table-bordered'>"
				code += "<tr><td>우편번호</td><td>주소</td><td>번지</td></tr>"
				
				$.each(res, function(i, v) {
//					code += `<tr><td>${res[i].zipcode}</td><td>주소</td><td>번지</td></tr>`
//					code += `<tr><td>${res[i].zipcode}</td>`;
//					code += `<tr><td>${v.zipcode}</td>`;
//					code += `<td>${v.sido} ${v.gugun} ${v.dong}</td>`;
//					code += `<td>${v.bunji}</td></tr>`;
					// 백틱왜 안될까오ㅛㅇ...
					bunji = v.bunji;
					if(typeof bunji=="undefined") bunji=""; // typeof 타입! 번지의 타입이~/ undefined는 문자아닌 자료형!
					
					code += "<tr class='ziptr'><td>" + v.zipcode + "</td>";
		            code += "<td>" + v.sido + v.gugun + v.dong + "</td>";
		            code += "<td>" + bunji + "</td></tr>" //v.bunji 위에서 적용해서 나왔쥬 

					
				})
				code += "</table>"	
				$('#searchres').html(code);
				//html 태그인 tr td있으니가~
				
			},
			error : function(xhr) {
				alert("상태 : " + xhr.status)
			},
			dataType : 'json'
		})//$.ajax
	})// click
	
	
	
	
})//$(function()

</script>


</head>
<body>
  <div>
	동입력<input type="text" id="dong">
  	<input type="button" value="확인" id="dongbtn">
  	
  	<br><br>
  	<div id=searchres></div>
  	
  </div>
</body>
</html>

@WebServlet("/Insert.do")

추가해서 넣을 것

profile
jychae
안녕하세요! 초보개발자 공부 시작!
이전 포스트

lprod vo, dao, service, controller

0개의 댓글