【Javascript】 우편 번호에서 주소를 자동 입력하는 방법
아티팩트
우편번호를 입력하여 주소를 어느 정도 자동으로 입력할 수 있는 것을 만들었기 때문에
그 출력입니다. (100-0000을 입력해도 자동 입력 가능합니다.)
환경
・Windows10
・Visual Studio Code
· jQuery
· zip cloud
zip cloud란?
공식 사이트 의 개요에 의하면,
일본 우편 웹 사이트에서 공개된 우편 번호 데이터를 재배포하는 서비스입니다.
Web API를 두드리면 다음과 같은 JSON으로 반환합니다.
{
"message": null,
"results": [
{
"address1": "東京都",
"address2": "千代田区",
"address3": "",
"kana1": "ﾄｳｷｮｳﾄ",
"kana2": "ﾁﾖﾀﾞｸ",
"kana3": "",
"prefcode": "13",
"zipcode": "1000000"
}
],
"status": 200
}
코드
zip cloud에서 얻은 JSON을 이용하여 아티팩트를 코딩하면 ...
index.html <body>
<form>
<div>
<label for="zip">郵便番号：</label><br>
<input id="zip" type="text" size="10">
</div>
<div>
<label for="address">住所：</label><br>
<input id="address" type="text" size="35">
</div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
//郵便番号の入力時に実行
$('#zip').change(function () {
//WEB API取得
$.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
{
zipcode:$('#zip').val()
}
)
//結果を取得してからの処理
.done(function (data) {
//中身が空でなければその値を住所欄に反映
if (data.results) {
var result = data.results[0];
$('#address').val(result.address1 + result.address2 + result.address3);
} else {
$('#address').val('該当する住所が存在しません。')
}
})
});
});
</script>
</body>
Javascript는 대단하다 - (소품감)
Reference
이 문제에 관하여(【Javascript】 우편 번호에서 주소를 자동 입력하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryutaro-Hirasawa/items/3f8bfcceb03462214076
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
・Windows10
・Visual Studio Code
· jQuery
· zip cloud
zip cloud란?
공식 사이트 의 개요에 의하면,
일본 우편 웹 사이트에서 공개된 우편 번호 데이터를 재배포하는 서비스입니다.
Web API를 두드리면 다음과 같은 JSON으로 반환합니다.
{
"message": null,
"results": [
{
"address1": "東京都",
"address2": "千代田区",
"address3": "",
"kana1": "ﾄｳｷｮｳﾄ",
"kana2": "ﾁﾖﾀﾞｸ",
"kana3": "",
"prefcode": "13",
"zipcode": "1000000"
}
],
"status": 200
}
코드
zip cloud에서 얻은 JSON을 이용하여 아티팩트를 코딩하면 ...
index.html <body>
<form>
<div>
<label for="zip">郵便番号：</label><br>
<input id="zip" type="text" size="10">
</div>
<div>
<label for="address">住所：</label><br>
<input id="address" type="text" size="35">
</div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
//郵便番号の入力時に実行
$('#zip').change(function () {
//WEB API取得
$.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
{
zipcode:$('#zip').val()
}
)
//結果を取得してからの処理
.done(function (data) {
//中身が空でなければその値を住所欄に反映
if (data.results) {
var result = data.results[0];
$('#address').val(result.address1 + result.address2 + result.address3);
} else {
$('#address').val('該当する住所が存在しません。')
}
})
});
});
</script>
</body>
Javascript는 대단하다 - (소품감)
Reference
이 문제에 관하여(【Javascript】 우편 번호에서 주소를 자동 입력하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Ryutaro-Hirasawa/items/3f8bfcceb03462214076
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<form>
<div>
<label for="zip">郵便番号：</label><br>
<input id="zip" type="text" size="10">
</div>
<div>
<label for="address">住所：</label><br>
<input id="address" type="text" size="35">
</div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function () {
//郵便番号の入力時に実行
$('#zip').change(function () {
//WEB API取得
$.getJSON('http://zipcloud.ibsnet.co.jp/api/search?callback=?',
{
zipcode:$('#zip').val()
}
)
//結果を取得してからの処理
.done(function (data) {
//中身が空でなければその値を住所欄に反映
if (data.results) {
var result = data.results[0];
$('#address').val(result.address1 + result.address2 + result.address3);
} else {
$('#address').val('該当する住所が存在しません。')
}
})
});
});
</script>
</body>
Reference
이 문제에 관하여(【Javascript】 우편 번호에서 주소를 자동 입력하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Ryutaro-Hirasawa/items/3f8bfcceb03462214076텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
