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

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

新規登録して質問してみよう
ただいま回答率
85.46%
JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

7092閲覧

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

setsu_tenhou

総合スコア33

JSONP

JSONP(JSON with padding)は、JSONを使用した関数呼び出しのための仕組み。クロスドメインでのデータの受け渡しが可能です。JavaScriptからクロスドメインで容易にデータを扱うことができます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/11/06 12:41

###前提・実現したいこと
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

###該当のソースコード

html

1<DOCTYPE html> 2<html> 3 <head> 4 <link rel="stylesheet" href="stylesheet.css" type="text/css"> 5 <script type="text/javascript" src="js1.js"></script> 6 </head> 7 <body> 8 <h3>Address Search</h3> 9 <label>Postal Code<input id="postalcode" type="text" 10 size="13" maxlength="8" placeholder="example: xxx-xxxx"></label> 11 <button id="btn">Search</button> 12 <div id="result"> 13 <p><label>Prefectures<input id="pref" type="text" size="6"></label></p> 14 <p><label>Cities<input id="city" type="text" size="6"></label></p> 15 <p><label>Street address<input id="saddress" type="text"></label></p> 16 </div> 17 </body> 18</html>

javascript

1document.addEventListener("DOMContentLoaded", function () { 2var btn = document.getElementById('btn'); 3btn.addEventListener('click', function() { 4 var postalcode = document.getElementById('postalcode'); 5 var pref = document.getElementById('pref'); 6 var city = document.getElementById('city'); 7 var address = document.getElementById('saddress'); 8 var script = document.createElement('script'); 9 10 script.src = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=" 11 + postalcode.value + "&callback=jsonData"; 12 document.body.appendChild(script); 13 document.body.removeChild(script); 14}) 15}) 16 17function jsonData(data) { 18 pref.value = data.result[0].address1; 19 city.value = data.result[0].address2; 20 address.value = data.result[0].address3; 21}

css

1#result { 2 margin-top: 30px; 3}

###補足情報(言語/FW/ツール等のバージョンなど)
コードは上から順に
sample.html
js1.js
stylesheet.css
となっております。

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

投稿2017/11/06 13:17

yambejp

総合スコア115047

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

setsu_tenhou

2017/11/07 00:35

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

0

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

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Address Search</title> 5 <style> 6#result { 7 margin-top: 30px; 8} 9 </style> 10 <script> 11document.addEventListener("DOMContentLoaded", function () { 12 const btn = document.getElementById('btn'); 13 btn.addEventListener('click', function() { 14 const postalcode = document.getElementById('postalcode'); 15 const script = document.createElement('script'); 16 17 script.src = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=" 18 + postalcode.value + "&callback=jsonData"; 19 document.body.appendChild(script); 20 document.body.removeChild(script); 21 }); 22}); 23 24function jsonData(data) { 25 if (data.results) { 26 const pref = document.getElementById('pref'); 27 const city = document.getElementById('city'); 28 const address = document.getElementById('saddress'); 29 30 pref.value = data.results[0].address1; 31 city.value = data.results[0].address2; 32 address.value = data.results[0].address3; 33 } 34} 35 </script> 36 </head> 37 <body> 38 <h3>Address Search</h3> 39 <p> 40 <label for="postalcode">Postal Code: </label> 41 <input id="postalcode" type="text" size="13" maxlength="8" placeholder="example: xxx-xxxx"> 42 <button id="btn">Search</button> 43 </p> 44 <div id="result"> 45 <p><label for="pref">Prefectures: </label><input id="pref" type="text" size="6"></p> 46 <p><label for="city">Cities: </label><input id="city" type="text" size="16"></p> 47 <p><label for="saddress">Street address: </label><input id="saddress" type="text" size="16"></p> 48 </div> 49 </body> 50</html>

投稿2017/11/06 13:08

編集2017/11/06 13:11
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

setsu_tenhou

2017/11/07 00:40

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

0

ベストアンサー

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

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

投稿2017/11/06 12:59

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

setsu_tenhou

2017/11/07 00:39 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問