jqueryを使ってJSONデータを取得しようとしたが、エラーとなってしまいます。

###前提・実現したいこと
下記のサイトを参照にして、jqueryよりAPIを実行してjsonデータを取得する仕組を構築しようとしています。
参考サイト
しかし、レスポンスは正常(200)に返ってきているにも関わらず、データを取得することができません。
※argumentsがerrorとなって返ってきてしまいます。
(処理実行時のネットワークモニタ(netbeans)画面)

環境回りが原因な気もするのですが、何か原因が分かる方がいればアドバイス頂きたいと思います。

###該当のソースコード
呼び出しhtml

html
1<!DOCTYPE html>
2<!--
3To change this license header, choose License Headers in Project Properties.
4To change this template file, choose Tools | Templates
5and open the template in the editor.
6-->
7<html>
8    <head>
9        <title>TODO supply a title</title>
10        <meta charset="UTF-8">
11        <meta name="viewport" content="width=device-width, initial-scale=1.0">
12        <!-- jQuery読み込み -->
13        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
14        <!-- JS読み込み -->
15        <script src="js/default.js"></script>
16    </head>
17    <body>
18        <input type="button" id="execute" class="btn btn-default btn-lg" value="送信" onclick="getJSON()"><br>
19    </body>
20</html>

jsファイル

javascript
1/* エラー文字列の生成 */
2function errorHandler(args) {
3    var error;
4    // errorThrownはHTTP通信に成功したときだけ空文字列以外の値が定義される
5    if (args[2]) {
6        try {
7            // JSONとしてパースが成功し、且つ {"error":"..."} という構造であったとき
8            // (undefinedが代入されるのを防ぐためにtoStringメソッドを使用)
9            error = $.parseJSON(args[0].responseText).error.toString();
10        } catch (e) {
11            // パースに失敗した、もしくは期待する構造でなかったとき
12            // (PHP側にエラーがあったときにもデバッグしやすいようにレスポンスをテキストとして返す)
13            error = 'parsererror(' + args[2] + '): ' + args[0].responseText;
14        }
15    } else {
16        // 通信に失敗したとき
17        error = args[1] + '(HTTP request failed)';
18    }
19    return error;
20}
21
22// DOMを全て読み込んだあとに実行される
23$(function () {
24    // 「#execute」をクリックしたとき
25    $('#execute').click(function () {
26        // Ajax通信を開始する
27        $.ajax({
28            url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060',
29            type: 'get', // getかpostを指定(デフォルトは前者)
30            dataType: 'json' // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる
31
32        })
33        // ・ステータスコードは正常で、dataTypeで定義したようにパース出来たとき
34        .done(function (response) {
35            $('#result').val('成功');
36            alert(response.data);
37        })
38        // ・サーバからステータスコード400以上が返ってきたとき
39        // ・ステータスコードは正常だが、dataTypeで定義したようにパース出来なかったとき
40        // ・通信に失敗したとき
41        .fail(function () {
42            // jqXHR, textStatus, errorThrown と書くのは長いので、argumentsでまとめて渡す
43            // (PHPのfunc_get_args関数の返り値のようなもの)
44            $('#result').val('失敗');
45            alert(errorHandler(arguments));
46        });
47    });
48});

###環境
windows
netbeans(開発環境)
い

行動規範の内容に同意します

回答3件

これは、phpの設定ではないでしょうか？
実行すると、ブラウザのコンソールに以下のエラーメッセージが表示されます

XMLHttpRequest cannot load http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

これを加えるだけで動作可能ともいますので、一度確認ください。

php
1header("Access-Control-Allow-Origin: *");

Access-Control-Allow-Originエラーの対処法(PHP+JQuery )

投稿2017/02/01 13:58

退会済みユーザー

総合スコア0

ベストアンサー

http://zipcloud.ibsnet.co.jp/api/search
のAPIだったらもっと別のサンプルを紹介します

http://www.buildinsider.net/web/jqueryref/034

投稿2017/02/01 10:01

date

総合スコア1820

motuo

2017/02/01 12:57

ご回答、ありがとうございます。このサイトも参考にしてみましたが、結果は同じでした。 $.getJSONでも上記と同様、IDEではレスポンスは正常に見られるものの、データの取得は出来ませんでた。

date

2017/02/01 23:56

dataType: 'json' を dataType: 'jsonp' にすれば動くようです

motuo

2017/02/02 00:13

dataTypeの違いでした。。。こんなに単純な事だったとは。ありがとうございました！

行動規範の内容に同意します

まあ、このzipcloudというサービスに

インデントにタブ使うな！
httpsに対応しろ!!
ヘッダつけろ!!!

って言うしかないです。
それまでのしのぎとしてCORS proxyサービスを使用するしかないでしょう。

js
1$.ajax({
2    url: 'http://cors-proxy.htmldriven.com/?url=http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060',
3    dataType: 'text', // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる
4    success: function(data) {
5        console.log(JSON.parse(data.replace(/\\r|\\n|\\t/g, '')));
6    }
7});