![[jQuery] DAUM - 우편번호 API 서비스 사용 샘플](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcswQie%2Fbtsq2jshKUx%2FNuBq4IxQhaTm6TCuDEkPXK%2Fimg.jpg)
728x90
Chapter#01 : DAUM - 우편번호 API 서비스 사용 샘플
Chapter#02 : DAUM - 우편번호 API 서비스 Mobile 화면에서 사용
다음, 카카오 우편번호 서비스( http://postcode.map.daum.net/guide ) API키 등의 발급없이
우편번호와 주소정보를 받아올 수 있어 쉰게 구현이 가능하다.
JavaScript 파일인 http://dmaps.daum.net/map_js_init/postcode.v2.js 스크립트만 추가해 주면 된다.
# 소스코드
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>:: 다음 주소록 API ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/JavaScript" src="https://ssl.daumcdn.net/dmaps/map_js_init/postcode.v2.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#btnExecPostCode").on("click", function(event) {
openDaumZipAddress();
});
});
function openDaumZipAddress() {
new daum.Postcode({
oncomplete:function(data) {
jQuery("#zonecode").val(data.zonecode);
jQuery("#roadAddress").val(data.roadAddress);
jQuery("#jibunAddress").val(data.jibunAddress);
jQuery("#bname").val(data.bname);
jQuery("#address_detail").focus();
console.log(data);
}
}).open();
}
</script>
</head>
<body>
<h3>■ Daum 우편번호 API 서비스</h3>
<br/>
<input type="text" id="zonecode" value="" style="text-align:center;width:100px;" placeholder="00000" readOnly/>
<button type="button" id="btnExecPostCode">우편번호 찾기</button>
<br/>
<input type="text" id="roadAddress" value="" style="width:300px;" placeholder="도로명주소" readOnly/>
<input type="text" id="jibunAddress" value="" style="width:300px;" placeholder="지번주소" readOnly/>
<br/>
<input type="text" id="address_detail" value="" style="width:400px;" placeholder="상세주소"/>
<input type="text" id="bname" value="" style="width:200px;" placeholder="참고항목"/>
</body>
</html>
# 출력결과
■ Daum 우편번호 API 서비스
728x90
'jQuery' 카테고리의 다른 글
| [jQuery] jQuery UI DatePicker 한국어 설정 (0) | 2025.03.31 |
|---|---|
| [jQuery] DAUM - 우편번호 API 서비스 Mobile 화면에서 사용 (0) | 2023.08.12 |
| [jQuery] 테이블 행 Drag & Drop으로 이동시키기 (0) | 2023.07.03 |
| [Spring] 소스트리 연동 프로젝트 이클립스에서 import 하는 방법 (0) | 2023.04.06 |