우편번호검색
색 결과에서 원하는 행을 클릭하면 우편번호와 주소를 부모창으로 전달한다
자식창에서 부모창에 데이터를 전달하는 방법
//순수 자바 스크립트 코드
부모영역의 출력할 객체를 나타내는 이름 .value = 자식창에서 만든값
opener.document.memberForm.zip.value=zip //우편번호
opener.document.memberForm.add1.value=addr //주소
//jQuery
(‘#zip’, opener.document).val(zip)
$(‘#add1’, opener.document).val(addr)
# html - 태그까지 가져올 때
# text - 문자만 가져올 때
# val - input, textarea, text 의 값을 가져올 때
modal
data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal
jQuery를 이용한 AJAX
Ajax를 이용해서 서버에 데이타를 보낼때는 Ajax요청으로 전송 할 수 있고
서버가 이해 할 수 있는 형식으로 바꿔야함
데이타를 직렬화하면 하나의 객체로 모을 수 있고 따라서 Ajax요청에서
데이타를 한덩어리로 보낼 수 있습니다.
jQuery 에서 제공하는 직렬화 메소드는 serialize 입니다.
<script src="../js/jquery.serializejson.min.js"></script>추가
<form id="my_form">
<input type="text" name=“name" value=“korea" />
<input type="text" name=“kor" value=“82" />
<input type="text" name=“eng" value=“73" />
$("#my_form"). serialize() : 모든 필드를 문자열 하나로 합침
name=korea&kor=82&eng=73
$("#my_form"). serializeArray() : [ {name:“name", value:“korera" },
{name:“kor", value:“82"} , {name:“eng", value=“73" } ]
$("#my_form"). serializeJSON() :
Object {name: “korea", kor: "78", eng: "67", mat: "56", com: "78"}
member.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="../js/jquery.serializejson.min.js"></script>
<style>
.ziptr:hover{
background: lime;
}
</style>
<script type="text/javascript">
$(function(){
/* 아이디 중복검사 */
$('#idbtn').on('click',function(){
idvalue = $('#id').val().trim();
if(idvalue.length < 1){
alert("아이디를 입력하세요");
return false;
}
//정규식 체크
//서버로 전송하기
$.ajax({
url : '/jqpro/CheckId.do',
data : {"id" : idvalue}, // data : "id=" + idvalue
type : 'get',
success : function(res){
$('#spanid').html(res.sw).css('color', 'red');
},
error : function(xhr){
alert("상태 : " + xhr.status); //404(이름,path), 500(콘솔확인), 200(json형태 - jsp페이지확인)
},
dataType : 'json'
});
});
$('#zipbtn').on('click', function(){
window.open("zipsearch.jsp", "우편번호찾기", "width=500 height=400"); //name or target
});
/* 우편번호 검색 - modal */
/* modal창에서 검색버튼 클릭시 */
$('#but').on('click',function(){
dongval = $('#dong').val().trim();
console.log(dongval);
if(dongval.length < 1){
alert("입력하세요");
return false;
}
//서버로 전송하기
$.ajax({
url : "<%=request.getContextPath()%>/ZipSearch.do",
data : {"dong" : dongval},
type : 'post',
success : function(res){
str = "<table border='1'>";
str += "<tr><td>우편번호</td>";
str += "<td>주소</td><td>번지</td></tr>";
$.each(res,function(i,v){
str += "<tr class='ziptr'><td>"+ res[i].zipcode +"</td>";
str += "<td>"+v.addr+"</td><td>"+v.bunji+"</td></tr>";
});
str += "</table>";
$('#result').html(str);
},
error : function(xhr){
alert("상태 : " + xhr.status);
},
dataType : 'json'
});
});
$(document).on('click', '.ziptr', function(){
//$('this td:eq(0)') => 이렇게 사용하면 안 됨
zip = $('td:eq(0)', this).text(); //this = ziptr
addr = $('td:eq(1)', this).text();
$('#zip').val(zip);
$('#add1').val(addr);
/* //실행결과 지우기 - modal을 닫기 전에 지우기
$('#dong').val("");
$('#result').empty(); */
$('#myModal').modal('hide'); //modal객체 닫음
});
//모달닫는 이벤트 - 실행결과 지우기
$("#myModal").on('hide.bs.modal', function(){ //모달을 닫을 때 지우기
//실행결과 지우기
$('#dong').val(""); //#dong에 빈 값 주기
$('#result').empty(); // #result 비우기
});
/* 가입 - 저장하기 */
$('form').on('submit', function(){
//alert("submit");
// 3가지 방법으로 직렬화 가능
console.log($('form').serialize());
console.log($('form').serializeArray());
console.log($('form').serializeJSON()); // 외부 script 필요
$.ajax({
url : '/jqpro/Insert.do',
data : $('form').serializeArray(),
type : 'post',
success : function(res){
},
error : function(xhr){
alert("상태 : " + xhr.status);
},
dataType : 'json'
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" onsubmit="return false;">
<div class="form-group">
<label class="control-label col-sm-2" for="id">아이디</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Enter id" name="mem_id">
</div>
<button id="idbtn" type="button" class="btn btn-danger btn-sm">중복검사</button>
<span id="spanid"></span>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="name">이름</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="name" placeholder="Enter name" name="mem_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="bir">생년월일</label>
<div class="col-sm-2">
<input type="date" class="form-control" id="bir" placeholder="Enter bir" name="mem_bir">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="email">이메일</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="email" placeholder="Enter email" name="mem_email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">비밀번호</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="mem_pass">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="tel">전화번호</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="tel" placeholder="Enter tel" name="mem_tel">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="zip">우편번호:</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="zip" placeholder="Enter zip" name="mem_zip">
</div>
<button id="zipbtn" type="button" class="btn btn-danger btn-sm">번호검색 window</button>
<button data-toggle="modal" data-target="#myModal" type="button" class="btn btn-danger btn-sm">번호검색 modal</button>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="add1">주소1</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="add1" placeholder="Enter add1" name="mem_add1">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="add2">상세주소</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="add2" placeholder="Enter add2" name="mem_add2">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" >
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<h3>찾는 동이름을 입력하세요</h3>
<input type="text" name="dong" id="dong">
<button type="button" id="but">검색</button>
<br><br>
<div id="result"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
CheckId.java
=>아이디 중복체크하는 Servlet
package kr.or.ddit.join.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.join.service.IJoinService;
import kr.or.ddit.join.service.JoinServiceImpl;
/**
* Servlet implementation class CheckId
*/
@WebServlet("/CheckId.do")
public class CheckId extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckId() {
super();
// TODO Auto-generated constructor stub
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//0. 클라이언트 요청시 전송데이터 받기 - id
String userId = request.getParameter("id");
//1. service객체 얻기
IJoinService service = JoinServiceImpl.getInstance();
//2. service메소드 호출 - 결과값 받기
String checkId = service.checkId(userId);
// 결과값을 이용해서 json데이터 생성하거나 출력한다.
//jsp 응답페이지로 forward시켜서 위임한다
//3. 결과값을 request에 저장
request.setAttribute("checkId", checkId);
//4. jsp로 forward
request.getRequestDispatcher("1204/checkId.jsp").forward(request, response);
}
}
checkId.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//서블릿에서 결과값 공유하기
String id = (String)request.getAttribute("checkId");
//a001~x001, null
if(id==null){
%>
{
"sw" : "사용 가능한 id입니다"
}
<%
}else{
%>
{
"sw" : "사용 불가능한 id입니다"
}
<%
}
%>
ZipSearch.java
=> 우편번호 찾는 Servlet
package kr.or.ddit.join.controller;
import java.io.IOException;
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 kr.or.ddit.join.service.IJoinService;
import kr.or.ddit.join.service.JoinServiceImpl;
import kr.or.ddit.join.vo.ZipVO;
/**
* Servlet implementation class ZipSearch
*/
@WebServlet("/ZipSearch.do")
public class ZipSearch extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//0. 클라이언트 요청시 전송데이터 받기 - id
String dong = request.getParameter("dong");
//1. service객체 얻기
IJoinService service = JoinServiceImpl.getInstance();
//2. service메소드 호출 - 결과값 받기
List<ZipVO> list = service.selectByDong(dong);
// 결과값을 이용해서 json데이터 생성하거나 출력한다.
//jsp 응답페이지로 forward시켜서 위임한다
//3. 결과값을 request에 저장
request.setAttribute("dongList", list);
//4. jsp로 forward
request.getRequestDispatcher("1204/zipcode.jsp").forward(request, response);
}
}
zipcode.jsp
<%@page import="kr.or.ddit.join.vo.ZipVO"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//서블릿에서 수행된 결과 공유하여 json object배열을 생성
List<ZipVO> list = (List<ZipVO>)request.getAttribute("dongList");
%>
[
<%
for(int i=0; i<list.size(); i++){
ZipVO vo = list.get(i);
if(i>0) out.print(",");
String bunji = vo.getBunji();
if(bunji==null)bunji="";
%>
{
"zipcode" : "<%=vo.getZipcode()%>",
"addr" : "<%=vo.getSido()%> <%=vo.getGugun()%> <%=vo.getDong()%>",
"bunji" : "<%=bunji %>"
}
<%
}
%>
]zipsearch.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<style>
.ziptr:hover{
background : pink;
}
</style>
<script type="text/javascript">
$(function(){
$('#but').on('click',function(){
dongval = $('#dong').val().trim();
console.log(dongval);
if(dongval.length < 1){
alert("입력하세요");
return false;
}
//서버로 전송하기
$.ajax({
url : "<%=request.getContextPath()%>/ZipSearch.do",
data : {"dong" : dongval},
type : 'post',
success : function(res){
str = "<table border='1'>";
str += "<tr><td>우편번호</td>";
str += "<td>주소</td><td>번지</td></tr>";
$.each(res,function(i,v){
str += "<tr class='ziptr'><td>"+ res[i].zipcode +"</td>";
str += "<td>"+v.addr+"</td><td>"+v.bunji+"</td></tr>";
});
str += "</table>";
$('#result').html(str);
},
error : function(xhr){
alert("상태 : " + xhr.status);
},
dataType : 'json'
});
});
$(document).on('click', '.ziptr', function(){
//$('this td:eq(0)') => 이렇게 사용하면 안 됨
zip = $('td:eq(0)', this).text(); //this = ziptr
addr = $('td:eq(1)', this).text();
$('#zip', opener.document).val(zip);//부모객체에 데이터를 넘겨줌 - opener
$('#add1', opener.document).val(addr);
window.close();
});
});
</script>
</head>
<body>
<h3>찾는 동이름을 입력하세요</h3>
<input type="text" name="dong" id="dong">
<button type="button" id="but">검색</button>
<br><br>
<div id="result"></div>
</body>
</html>