退会済みユーザー
2017/11/06 22:11 投稿
| 下記としてみました。 |
| 郵便番号検索APIが結果を返さないのは、_hiroさんもご指摘のように、該当のAPIはhttpsに対応していないためのようです。 |
| ```html |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Address Search</title> |
| <style> |
| #result { |
| margin-top: 30px; |
| } |
| </style> |
| <script> |
| document.addEventListener("DOMContentLoaded", function () { |
| const btn = document.getElementById('btn'); |
| btn.addEventListener('click', function() { |
| const postalcode = document.getElementById('postalcode'); |
| const script = document.createElement('script'); |
| script.src = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=" |
| + postalcode.value + "&callback=jsonData"; |
| document.body.appendChild(script); |
| document.body.removeChild(script); |
| }); |
| }); |
| function jsonData(data) { |
| if (data.results) { |
| const pref = document.getElementById('pref'); |
| const city = document.getElementById('city'); |
| const address = document.getElementById('saddress'); |
| pref.value = data.results[0].address1; |
| city.value = data.results[0].address2; |
| address.value = data.results[0].address3; |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <h3>Address Search</h3> |
| <p> |
| <label for="postalcode">Postal Code: </label> |
| <input id="postalcode" type="text" size="13" maxlength="8" placeholder="example: xxx-xxxx"> |
| <button id="btn">Search</button> |
| </p> |
| <div id="result"> |
| <p><label for="pref">Prefectures: </label><input id="pref" type="text" size="6"></p> |
| <p><label for="city">Cities: </label><input id="city" type="text" size="16"></p> |
| <p><label for="saddress">Street address: </label><input id="saddress" type="text" size="16"></p> |
| </div> |
| </body> |
| </html> |
| ``` |
