728x90
반응형
API 체험하기_도로명주소
https://business.juso.go.kr/addrlink/openApi/apiExprn.do?cPath=99JA
API 체험하기
business.juso.go.kr
팝업API
https://business.juso.go.kr/addrlink/openApi/popupApi.do
팝업API
본인인증 사용중인 휴대전화번호로 인증 인증하기 아이핀 인증 본인 명의 아이핀 계정으로 인증 인증하기
business.juso.go.kr
팝업API 호출소스보기 클릭 후에 다운받은 guidePopupApiJSP 폴더 안에 있는 jusoPopup jsp 파일 활용 바랍니다.
jsp sample
우편번호 백업 데이터를 공공 오픈 API로 변경해보자
네이밍 잘하기!
createUser.do > userC.jsp 와 연동된다.
백으로 주소 넘기기 > 백에 있는 기존 데이터 코드도 변경해야한다 / 행안부 주소로 적용!
회원가입 후 db에서 조회되면 데이터가 들어가있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var ="context"><%=request.getContextPath()%></c:set>
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="userC.jsp">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${context}/css/bootstrap.min.css" rel="stylesheet">
<link href="${context}/css/bootstrap-theme.css" rel="stylesheet">
<link href="${context}/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="${context}/css/plugins/social-buttons.css" rel="stylesheet">
<link href="${context}/font-awesome-4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" >
<link href="${context}/css/plugins/dataTables.bootstrap.css" rel="stylesheet">
<link href="${context}/css/process.css" rel="stylesheet">
<script src="${context}/js/jquery-1.9.1.js"></script>
<script src="${context}/js/jquery.form.js"></script>
<script src="${context}/js/plugins/metisMenu/metisMenu.min.js"></script>
<script src="${context}/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="${context}/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript">
var dong;
var imageFolder;
$(document).ready(function(){
// $('#dataTables-example').dataTable();
fn_init();
imageFolder = "userImg";
$( "#birth" ).datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
yearRange: "1980:2015"
});
$("#dong").keydown(function (key){
if(key.keyCode == 13){
fn_postCheck();
}
});
});
function fn_setData(self){
var postAllData = self.children().text();
var postSplit = postAllData.split(" ");
var zipcode = postSplit[0].split("-");
var postNum1 = zipcode[0];
var postNum2 = zipcode[1];
var sido = postSplit[1];
var gugun = postSplit[2];
var dong = postSplit[3];
var subDong = postSplit[4];
if(subDong == null) subDong = "";
var detailAddress = sido + " " + gugun + " " + dong + " " + subDong;
$("#postNum1").val(postNum1);
$("#postNum2").val(postNum2);
$("#address1").val(detailAddress);
$("#searchPost").modal('hide');
}
function fn_postCheck(){
dong = $("#dong").val();
if(dong == ""){
alert("동을 입력하세요.");
return;
}
$("#postBody").children().remove();
var aheadHtml = "<tr><td style='text-align: center;'><a onclick=javascript:fn_setData($(this))><b>";
var backHtml = "</b></a></td></tr>";
var appendHtml = "";
var param = {};
param["dong"] = dong;
$.ajax({
url:"${context}/work/applicant/retrievePostByDong.do",
contentType:"application/json",
dataType:"json",
data:param,
success:function(result){
for(var i = 0; i < result.length; i++){
appendHtml
+= aheadHtml
+ result[i].zipcode + " "
+ result[i].sido + " "
+ result[i].gugun + " "
+ result[i].dong + " "
+ backHtml;
}
$("#postBody").append(appendHtml);
}
});
}
function fn_save(){
if(!fn_validation()) return;
if($("#flag").val() == "false"){
alert("이미 사용중인 ID입니다");
$("id").focus();
return;
}
$("#phoneNum").val($("#phone1").val() + "-" + $("#phone2").val());
// 11단계 : 아래 2줄 소스 #zipNo, #roadAddrPart1, #addrDetail 변경해 줌.
// 그리고, 회원가입 웹페이지 새로고침(F5) 후에 전체적으로 회원 정보 등록 가입하고 로그인 확인함.
$("#postNum").val($("#zipNo").val());
$("#address").val($("#roadAddrPart1").val() + "/" + $("#addrDetail").val());
// $("#postNum").val($("#postNum1").val() + "-" + $("#postNum2").val());
// $("#address").val($("#address1").val() + "/" + $("#address2").val());
$("#joinFrm").submit();
}
function idCheck(){
var id = $("#id").val();
var access = $("#message");
$.ajax({
url:"${context}/work/user/idCheck.do?id=" + id,
success:function(result){
result2 = result.replace(/"/gi, "");
var splResult = result2.split("@");
access.html(splResult[0]);
$("#flag").val(splResult[1]);
}
});
}
function fn_upload(){
$("#ajaxform").ajaxSubmit({
type: "POST",
dataType: 'text',
url: $("#ajaxform").attr("action"),
data: $("#ajaxform").serialize(),
success: function (data) {
data2 = data.replace(/"/gi, "");
var imageUrl = "${context}/userImg/" + data2;
$("#pic").attr("src", imageUrl);
$("#userImage").val(data2);
},
error: function (xhr, status, error) {
alert(error);
}
});
}
</script>
</head>
<body>
<jsp:include page="../common/top.jsp"></jsp:include>
<div id="jumbotron" class="container">
<div class="jumbotron jumbotron-info" style="background-color: lightgray;">
<h1><font color="black"><strong>회원가입</strong> <span class="glyphicon glyphicon glyphicon-pencil"></span></font></h1>
<p>ESHOP 회원가입을 진심으로 환영합니다.</p>
</div>
</div>
<div class="container">
<!-- 1단계 : id="joinFrm" 확인하고, name="joinFrm" 추가 -->
<form id="joinFrm" name="joinFrm" method="post" action="${context}/work/user/createUser.do" role="form">
<div class="form-horizontal">
<hr/>
<div class="form-group" style="margin-top: 5%;">
<label for="id" class="control-label col-md-2"><b>아이디</b></label>
<div class="col-md-4">
<input class="form-control" type="text" name="id" id="id" required="required" autofocus="autofocus" onkeyup="idCheck();"/>
</div>
<p id="message"></p>
</div>
<div class="form-group">
<label for="pw" class="control-label col-md-2"><b>비밀번호</b></label>
<div class="col-md-4">
<input class="form-control" type="password" name="pw" id="pw" required="required"/>
</div>
</div>
<div class="form-group">
<label for="email" class="control-label col-md-2"><b>이메일</b></label>
<div class="col-md-4">
<input class="form-control" type="email" name="email" id="email" required="required"/>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-md-2"><b>성명</b></label>
<div class="col-md-6">
<input class="form-control" type="text" id="name" name="name" autofocus="autofocus" required="required"/>
</div>
</div>
<div class="form-group">
<label for="birth" class="control-label col-md-2"><b>생년월일</b></label>
<div class="col-md-6">
<input class="form-control" type="text" id="birth" name="birth" required="required" maxlength="10"/>
</div>
</div>
<div class="form-group">
<label for="phoneCd" class="control-label col-md-2"><b>연락처</b></label>
<div class="col-md-2">
<select class="form-control" id="phoneCd" name="phoneCd" required="required">
<c:forEach items="${dsCode1}" var="code1">
<option value="${code1.commCd}">${code1.commCdNm}</option>
</c:forEach>
</select>
</div>
<div class="col-md-2">
<input class="form-control" type="text" id="phone1" maxlength="4" required="required" onkeydown="return fn_showKeyCode(event)"/>
</div>
<div class="col-md-2">
<input class="form-control" type="text" id="phone2" maxlength="4" required="required" onkeydown="return fn_showKeyCode(event)"/>
</div>
<input type="hidden" id="phoneNum" name="phoneNum">
</div>
<div class="form-group">
<!-- 2단계 : 아래 구문에서 우편번호 텍스트 수정 -->
<label for="zipNo" class="control-label col-md-2"><b>우편번호</b></label>
<!--
<label for="postnum1" class="control-label col-md-2"><b>주소</b></label>
-->
<div class="col-md-2">
<!-- 3단계 : 아래 구문에서 우편번호 id="zipNo" name="zipNo" 추가 -->
<input class="form-control" type="text" id="zipNo" name="zipNo" disabled="disabled" required="required"/>
<!--
<input class="form-control" type="text" id="postNum1" disabled="disabled" required="required"/>
-->
</div>
<!-- 4단계 : 아래 우편번호 두번째 입력란은 필요 없기에 주석 처리를 해줍니다! -->
<!--
<div class="col-md-2">
<input class="form-control" type="text" id="postNum2" disabled="disabled" required="required"/>
</div>
-->
<span class="col-md-1">
<!-- 5단계 : 아래 구문에서 onClick="goPopup(); goPopup 메서드 호출 구문 추가 -->
<button type="button" class="btn btn-info" data-toggle="modal" onClick="goPopup();"><b>주소검색</b></button>
<!--
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#searchPost"><b>주소검색</b></button>
-->
</span>
<input type="hidden" id="postNum" name="postNum">
</div>
<div class="form-group">
<!-- 6단계 : 아래 "상세주소" 텍스트를 "도로명주소"로 변경함 -->
<label for="roadAddrPart1" class="control-label col-md-2"><b>도로명주소</b></label>
<!--
<label for="address1" class="control-label col-md-2"><b>상세주소</b></label>
-->
<div class="col-md-6">
<!-- 7단계 : 아래에 id="roadAddrPart1" name="roadAddrPart1" 속성과 값을 추가함 -->
<input class="form-control" type="text" id="roadAddrPart1" name="roadAddrPart1" disabled="disabled" required="required"/>
<!--
<input class="form-control" type="text" id="address1" disabled="disabled" required="required"/>
-->
</div>
</div>
<div class="form-group">
<!-- 8단계 : 아래에 label 태그 안에 "상세주소" 텍스트를 추가해 줌 -->
<label for="addrDetail" class="control-label col-md-2">
<b><font color="red">* </font>상세주소</b>
</label>
<div class="col-md-6">
<!-- 9단계 : 아래에 id="addrDetail" name="addrDetail" 속성과 값을 추가함 -->
<input class="form-control" type="text" id="addrDetail" name="addrDetail" />
<!--
<input class="form-control" type="text" id="address2"/>
-->
</div>
<input type="hidden" id="address" name="address">
</div>
<div class="form-group">
<label class="control-label col-md-2"><b>사진</b></label>
<img id="pic" style="margin-left: 15px;" height="180px" width="150px" src="${context}/backgroundImage/defaultpic.png"><br/>
<div class="col-md-6">
<input type="hidden" id="userImage" name="userImage" required="required">
</div>
</div>
<input type="hidden" id="flag" name="flag" value="false">
</div>
</form>
<form id="ajaxform" action="${context}/work/product/saveFile.do" method="post" enctype="multipart/form-data" role="form">
<div class="form-group">
<label class="control-label col-md-2"></label>
<div class="col-md-6">
<input class="form-control" type="file" id="imageFile" name="imageFile" onchange="fn_upload()"/>
<input type="hidden" id="imageFolder" name="imageFolder" value="userImg">
</div>
</div>
<br><br><br>
<div class="form-group">
<div class="col-md-offset-6 col-md-1">
<button type="button" class="btn btn-success" onclick="fn_back()">뒤로가기</button>
</div>
<div class="col-md-1">
<button class="btn btn-primary" type="button" name="btnSubmit" id="btnSubmit" onclick="fn_save()">등록하기</button>
</div>
</div>
</form>
</div>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="searchPost" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">주소검색</h4>
</div>
<div class="modal-body" style="height: 50px;">
<div class="col-md-6">
<input class="form-control" type="text" id="dong" name="dong" placeholder="동을 입력하세요.ex)역삼1동"/>
</div>
<div class="col-md-1">
<button id="postCheck" type="button" class="btn btn-primary" onclick = "fn_postCheck()">확인</button>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th style="text-align: center; vertical-align: middle; ">주소</th>
</tr>
</thead>
<tbody id="postBody">
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
</div>
<!-- /.panel -->
</div>
</div>
<!-- /.panel -->
</div>
</div>
<jsp:include page="../common/foot.jsp"></jsp:include>
<script language="javascript">
// opener관련 오류가 발생하는 경우 아래 주석을 해지하고, 사용자의 도메인정보를 입력합니다. ("팝업API 호출 소스"도 동일하게 적용시켜야 합니다.)
//document.domain = "abc.go.kr";
function goPopup(){
// 10단계 : 아래에 window 객체의 open() 메서드 주소를 ${context}/user/jusoPopup.jsp 로 변경처리 해 줌
// 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(https://business.juso.go.kr/addrlink/addrLinkUrl.do)를 호출하게 됩니다.
var pop = window.open("${context}/user/jusoPopup.jsp","pop","width=570,height=420, scrollbars=yes, resizable=yes");
// 모바일 웹인 경우, 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(https://business.juso.go.kr/addrlink/addrMobileLinkUrl.do)를 호출하게 됩니다.
//var pop = window.open("/popup/jusoPopup.jsp","pop","scrollbars=yes, resizable=yes");
}
/** API 서비스 제공항목 확대 (2017.02) **/
function jusoCallBack(roadAddrPart1,addrDetail,zipNo){
// 팝업페이지에서 주소입력한 정보를 받아서, 현 페이지에 정보를 등록합니다.
document.joinFrm.roadAddrPart1.value = roadAddrPart1;
document.joinFrm.addrDetail.value = addrDetail;
document.joinFrm.zipNo.value = zipNo;
}
</script>
</body>
</html>728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [BACKEND]JAVA_입력과 출력 (0) | 2024.01.10 |
|---|---|
| [BACKEND]Spring 파일 업로드와 썸네일 이미지 생성 (0) | 2023.11.08 |
| [BACKEND]ESHOP_AdroidApp_ReactApp_DB_Single SignOn 통합 처리 (0) | 2023.11.07 |
| [안드로이드 프로그래밍을 위한 자바기초] 조건문과 반복문의 기본 문법 이해하기 (0) | 2023.11.05 |
| [안드로이드 프로그래밍을 위한 자바기초] 연산자의 기본 문법 이해하기 (0) | 2023.11.04 |