質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

javascriptでjsonpデータを受け取りたい(zipcloud 郵便番号)

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 4,601

score 29

前提・実現したいこと

javascriptでapiを使って簡単なサイトを作ってみようとしたのですが、どうやらjsonpデータを受け取れていないようです。
jQueryでコーディングした場合はできましたので、zipcloud自体には問題はないはずです(当たり前ですが)

簡単なサイトとは具体的には、郵便番号を入力し、それに対応する住所をapiを使って持って来て、それを表示するというものです。

発生している問題・エラーメッセージ

コンソールに表示されたエラー

js1.js:12 GET https://zipcloud.ibsnet.co.jp/api/search?zipcode=113-0043&callback=jsonData net::ERR_CONNECTION_CLOSED
(anonymous) @ js1.js:12

該当のソースコード

<DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="stylesheet.css" type="text/css">
        <script type="text/javascript" src="js1.js"></script>
    </head>
        <body>
            <h3>Address Search</h3>
            <label>Postal Code<input id="postalcode" type="text" 
            size="13" maxlength="8" placeholder="example: xxx-xxxx"></label>
            <button id="btn">Search</button>
            <div id="result">
                <p><label>Prefectures<input id="pref" type="text" size="6"></label></p>
                <p><label>Cities<input id="city" type="text" size="6"></label></p>
                <p><label>Street address<input id="saddress" type="text"></label></p>
            </div>
        </body>
</html>
document.addEventListener("DOMContentLoaded", function () {
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    var postalcode = document.getElementById('postalcode');
    var pref = document.getElementById('pref');
    var city = document.getElementById('city');
    var address = document.getElementById('saddress');
    var script = document.createElement('script');

    script.src = "https://zipcloud.ibsnet.co.jp/api/search?zipcode="
    + postalcode.value + "&callback=jsonData";
    document.body.appendChild(script);
    document.body.removeChild(script);
})
})

function jsonData(data) {
    pref.value = data.result[0].address1;
    city.value = data.result[0].address2;
    address.value = data.result[0].address3;
}
#result {
    margin-top: 30px;
}

補足情報(言語/FW/ツール等のバージョンなど)

コードは上から順に
sample.html
js1.js
stylesheet.css
となっております。

回答よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

下記としてみました。
郵便番号検索APIが結果を返さないのは、_hiroさんもご指摘のように、該当のAPIはhttpsに対応していないためのようです。

<!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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/07 09:40

    回答どうもありがとうございます。
    参考になりました。

    キャンセル

+2

きちんとjsonpの仕様を理解されていますか?

jsonp自体json風の文字列がコールバックに渡せる形で文字列としてかえってくる仕組みですから
apiの挙動はブラウザにダイレクトにurlを打ち込んでコールバック付きのjson風データが
表示されるかどうかで判断できます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/07 09:35

    回答どうもありがとうございます。
    簡単にjsonpについて調べただけでしたので、きちんと理解していない部分も多かったと思います。
    直接打ち込んでみたところjson風データが表示されました。
    参考になりました。

    キャンセル

checkベストアンサー

+1

http://zipcloud.ibsnet.co.jp/doc/api

上記をちらっと見ただけですが、httpsではなくhttpなのでは?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/07 09:38 編集

    回答どうもありがとうございます。
    このように対応していないパターンもあるのですね。
    参考になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る