index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jsと郵便番号API</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h3>住所検索</h3> <div> <p> <label>郵便番号<input id="zipcode" type="text" size="10" maxlength="8"></label> <button id="btn">検索</button> </p> <p><label>都道府県 <input id="prefecture" type="text" size="10"></label></p> <p><label>市区町村 <input id="city" type="text" size="10"></label></p> <p><label>住所<input id="address" type="text" size="10"></label></p> </div> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/app.js"></script> </body> </html> |
app.js
|
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 |
$(function(){ $('#btn').on('click', function() { // 入力された郵便番号でWebAPIに住所情報をリクエスト $.ajax({ url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + $('#zipcode').val(), dataType : 'jsonp', }).done(function(data) { if (data.results) { setData(data.results[0]); } else { alert('該当するデータが見つかりませんでした'); } }).fail(function(data) { alert('通信に失敗しました'); }); }); // データ取得が成功したときの処理 function setData(data) { //取得したデータを各HTML要素に代入 $('#prefecture').val(data.address1); // 都道府県名 $('#city').val(data.address2); // 市区町村名 $('#address').val(data.address3); // 町域名 } }); |
この記事へのコメントはありません。