Spring 다음 우편번호 / 주소 가져오기

김강산·2022년 11월 1일
0

Spring

목록 보기
8/13

다음 우편번호 서비스의 장점

  • Key 발급 필요 x
  • 기업, 상업용이든 뭐든 무조건 무료로 사용 가능
  • 행정안전부에서 제공하는 주소 DB를 직접 업데이트

1. 다음 스크립트를 로딩한다.

2. HTML 코드로 Form, 기본 틀을 만들어준다

우편번호 : 검색
주소 :
상세주소 :

  1. 자바스크립트로 onclick 으로 넘어오는 메소드를 만들어준다.
    ​자바스크립트 메소드 안에 들어갈 내용은...

    new daum.Postcode( {
    oncomplete: function(data) {
    팝업에서 검색결과 항목 클릭했을 때 실행할 코드 입력하는 부분
    } } ).open();

    위의 소스코드는 다른 여러 개발자들의 글을 참고한 것인데
    ([name=homecode])JQuery.('[name=homecode]') 는 JQuery 다. ('[name=homecode]').val(data.zonecode); 는 name 값 homecode 를 가지고 있는 속성값에 data.zonecode를 넣는다고 보면 된다.

    jQuery 를 안 쓰면
    document.getElementById('postcode').value = data.zonecode;

    이런 식으로 텍스트 상자의 값을 입력해주면 된다.
  2. 다음 스크립트를 로딩
  3. HTML 코드로 Form, 대충 기본 틀
    우편번호
    주소
    상세 주소 입력
    집 전화
    핸드폰 번호
  4. 자바스크립트로 onclick 으로 넘어오는 메소드를 만들어주기
    function DaumPostcode() { new daum.Postcode({ oncomplete: function(data) { var roadAddr = data.roadAddress; // 도로명 주소 변수 // 우편번호와 주소 정보를 해당 필드에 넣는다. document.getElementById('postcode').value = data.zonecode; document.getElementById("roadAddress").value = roadAddr; detailAddress } }).open(); }

0개의 댓글