우선 http://postcode.map.daum.net/guide 여기 들어가시면
자세하게 다음에서 사용 방법까지 친절하게 설명해주고 있습니다.
회원 가입시에 우편번호,주소 외에 추가로 요구되는 사항이 있으면 확인하시어 변경하시면 되겠습니다.
우선 지금까지 작성하신 회원가입에서 코드를 추가하겠습니다. ~ 기본 회원가입, 비밀번호 암호화를 익시히고
오시면 되겠습니다.~
Signup.JSP에서
1 | <script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script> <script src="/resources/js/addressapi.js"></script> | cs |
스크립트를 추가합니다.
저같은경우엔 js파일을 따로 빼서 불러왔습니다.~
<script src="/resources/js/addressapi.js"></script> 이부분은 선택 사항입니다.
이제 주소에 해당하는 form을 수정하겠습니다.
1 2 3 4 5 6 7 8 9 10 | <div class="form-group"> <input class="form-control" style="width: 40%; display: inline;" placeholder="우편번호" name="addr1" id="addr1" type="text" readonly="readonly" > <button type="button" class="btn btn-default" onclick="execPostCode();"><i class="fa fa-search"></i> 우편번호 찾기</button> </div> <div class="form-group"> <input class="form-control" style="top: 5px;" placeholder="도로명 주소" name="addr2" id="addr2" type="text" readonly="readonly" /> </div> <div class="form-group"> <input class="form-control" placeholder="상세주소" name="addr3" id="addr3" type="text" /> </div> | cs |
우편번호 검색 버튼을 만들고 onclick="execPostCode(); 이벤트 버튼을 추가해주세요 각각 id=addr1를 부여하고
다음에서 제공하는
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | function execPostCode() { new daum.Postcode({ oncomplete: function(data) { // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분. // 도로명 주소의 노출 규칙에 따라 주소를 조합한다. // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다. var fullRoadAddr = data.roadAddress; // 도로명 주소 변수 var extraRoadAddr = ''; // 도로명 조합형 주소 변수 // 법정동명이 있을 경우 추가한다. (법정리는 제외) // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다. if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){ extraRoadAddr += data.bname; } // 건물명이 있고, 공동주택일 경우 추가한다. if(data.buildingName !== '' && data.apartment === 'Y'){ extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName); } // 도로명, 지번 조합형 주소가 있을 경우, 괄호까지 추가한 최종 문자열을 만든다. if(extraRoadAddr !== ''){ extraRoadAddr = ' (' + extraRoadAddr + ')'; } // 도로명, 지번 주소의 유무에 따라 해당 조합형 주소를 추가한다. if(fullRoadAddr !== ''){ fullRoadAddr += extraRoadAddr; } // 우편번호와 주소 정보를 해당 필드에 넣는다. console.log(data.zonecode); console.log(fullRoadAddr); $("[name=addr1]").val(data.zonecode); $("[name=addr2]").val(fullRoadAddr); /* document.getElementById('signUpUserPostNo').value = data.zonecode; //5자리 새우편번호 사용 document.getElementById('signUpUserCompanyAddress').value = fullRoadAddr; document.getElementById('signUpUserCompanyAddressDetail').value = data.jibunAddress; */ } }).open(); } | cs |
고대로~ 복사 하여 붙여넣기하고 제가 수정한 부분은 이부분입니다.
저는 이렇게 처리를 하였는데
1 2 3 | // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('sample3_postcode').value = data.zonecode; //5자리 새우편번호 사용 document.getElementById('sample3_address').value = fullAddr; | cs |
다음에서 제공하는 코드에는 이런식으로 작성 되어있을 것입니다.
요런식으로 바꿔주면 되겠죠 ??ㅎㅎ 끝입니다. 처음엔 데이터베이스에 테이블을 생성해야하나,
컬럼이 30개가 넘는걸 어떻게 다 만들어서 넣지 ㅠㅠ 엄청 고민했던 기억이 있네요 ㅎㅎㅎ
다른곳에서도 api를 제공하겠지만 , 저는 안해봐서 모르겠어요 ㅎㅎ 다음이 처음이자 마지막?ㅎㅎㅎ
사이트 들어가시면 초보자도 쉽게 이해 할 수있게 예제를 잘 만들어 뒀으니 ~ 활용해보시기 바랍니다.
우편 번호와 , 주소는 readonly처리하면 더 확실 하겠습니다~ ㅎㅎ
다음엔 회원가입시 유효성검사 validation 를 하겠습니다~
'프레임워크 > SpringFrameWork' 카테고리의 다른 글
| 5. ajax를 활용하여 아이디 중복체크 하기 (43) | 2018.02.08 |
|---|---|
| 4. 스프링 회원가입 유효성검사 (2) | 2018.02.07 |
| 2. 회원가입 암호화 하는방법2 (0) | 2018.02.07 |
| 1. Spring 회원가입하기 (4) | 2018.02.06 |
| spring 회원가입 비밀번호 암호화하여 DB에 저장하기 (0) | 2018.01.11 |