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

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

ただいまの
回答率

90.52%

  • JavaScript

    16349questions

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

  • jQuery

    6675questions

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

  • JSON

    1146questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,181

motuo

score 2959

前提・実現したいこと

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

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

該当のソースコード

呼び出しhtml

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


jsファイル

/* エラー文字列の生成 */
function errorHandler(args) {
    var error;
    // errorThrownはHTTP通信に成功したときだけ空文字列以外の値が定義される
    if (args[2]) {
        try {
            // JSONとしてパースが成功し、且つ {"error":"..."} という構造であったとき
            // (undefinedが代入されるのを防ぐためにtoStringメソッドを使用)
            error = $.parseJSON(args[0].responseText).error.toString();
        } catch (e) {
            // パースに失敗した、もしくは期待する構造でなかったとき
            // (PHP側にエラーがあったときにもデバッグしやすいようにレスポンスをテキストとして返す)
            error = 'parsererror(' + args[2] + '): ' + args[0].responseText;
        }
    } else {
        // 通信に失敗したとき
        error = args[1] + '(HTTP request failed)';
    }
    return error;
}

// DOMを全て読み込んだあとに実行される
$(function () {
    // 「#execute」をクリックしたとき
    $('#execute').click(function () {
        // Ajax通信を開始する
        $.ajax({
            url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=7830060',
            type: 'get', // getかpostを指定(デフォルトは前者)
            dataType: 'json' // 「json」を指定するとresponseがJSONとしてパースされたオブジェクトになる

        })
        // ・ステータスコードは正常で、dataTypeで定義したようにパース出来たとき
        .done(function (response) {
            $('#result').val('成功');
            alert(response.data);
        })
        // ・サーバからステータスコード400以上が返ってきたとき
        // ・ステータスコードは正常だが、dataTypeで定義したようにパース出来なかったとき
        // ・通信に失敗したとき
        .fail(function () {
            // jqXHR, textStatus, errorThrown と書くのは長いので、argumentsでまとめて渡す
            // (PHPのfunc_get_args関数の返り値のようなもの)
            $('#result').val('失敗');
            alert(errorHandler(arguments));
        });
    });
});

環境

windows
netbeans(開発環境)

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/01 21:57

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

    キャンセル

  • 2017/02/02 08:56

    dataType: 'json'

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

    キャンセル

  • 2017/02/02 09:13

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

    キャンセル

+1

これは、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.

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

  • 解決済

    【Jquery】textareaに改行入り文字列を表示させたい【PHP】

    データベースに保存してあるテキストをPHPで呼び出し、 そのテキストをボタンを押すことでテキストエリアに挿入する仕組みを作りたいです。 しかし、テキストに改行が含まれていたとき

  • 受付中

    適切なイベントがわからない。

    前提・実現したいこと imgタグで表示されているアイコンをクリックした後で、ポップアップされるdatepickerの表示崩れを修正したいです。 datepicker内のtabl

  • 解決済

    jQuery inplaceEditorの作り方

    前提 個人の名前やメールアドレスの表示されたマイページの作成しています。 実現したいこと 「編集」ボタンを押すと既に入力されいてる文字が編集可能の状態になり、 「保存」

  • 解決済

    "response body only accepts well-formed JSON" が返る

    お世話になっております。 WEBAPI 初挑戦で、楽天市場API(楽天市場商品検索API)を試してみています。 jQuery の CDN には、公式の 2.0 系を使用していま

  • 解決済

    jQuery ID属性取得がうまくいかない

    下記コードの$('input[name = bbs]').on('click',function()から処理で、bbsをclickした時に変数myidでradioのidを取得、変数

  • 解決済

    JQuery使用でのalert反応せず涙

    JQuery初心者です。JQueryを使用してタイマーを作成しようと思ったのですが、うまいこといかずとりあえず簡単なコードを書いてalertが反応するか確認したんですが、それも実行

  • 解決済

    jQueryでチェックボックスの値をPOSTしたい。

    前提・実現したいこと jQueryでチェックボックスの値をPOSTしたいと思っています。 jQuery.ajaxを使う事になると思うのですが、name属性が同じものが複数ある場

  • 解決済

    動的なリンクの作成

    <dl> <dt>23区南 <li class="all_check"><input type="checkbox"> <label>23区南す

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

  • JavaScript

    16349questions

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

  • jQuery

    6675questions

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

  • JSON

    1146questions

    JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。