web-dev-qa-db-ja.com

URLからJSONファイルを取得して表示する

コードは非常にシンプルで、なぜ機能しないのかわかりません。

これは、JSONファイルへのリンクです http://webapp.armadealo.com/home.json

GetJSONを使用したコードは次のとおりです

$.getJSON("http://webapp.armadealo.com/home.json", function(data){
alert(data);
});

JSONコンテンツ全体をコードに表示したいだけです。

javascriptjsonparsingurlgetjson
14
LINGS

何ヶ月もの検索の後、私は解決策を見つけました。したがって、私は自分の質問に答えています。

JSONがサポートされておらず、Same Originポリシーに固執している場合、JSONをパディングでラップしてJSONPにする必要があります。

それを行うために、私たちは命を救うウェブサイトを持っています http://anyorigin.com/

URLを貼り付けて、次のような対応するJQueryコードを取得できます。

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){
$('#output').html(data.contents);
});

独自のコードを使用する場合は、上記のコードのURLを使用します。

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?

上記のURLはJSONPと同じJSONデータを提供し、すべての問題を解決します。

私は次のコードを使用していました。成功するとdisplayAll関数が呼び出されます

$.ajax({
        url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?',
        type: 'GET',
        dataType: "json",
        success: displayAll
    });

function displayAll(data){
    alert(data);
}
6
LINGS

Chromeインスペクターを見ると、おそらく次のエラーが表示されます。

XMLHttpRequestはロードできません http://webapp.armadealo.com/home.json 。 Origin http://stackoverflow.com はAccess-Control-Allow-Originでは許可されていません。

これは、サーバーがクライアントのWebページにファイルを読み取らせないことを意味します。クライアントは信頼されていません。これは、mybank.evil.comなどのサイトがmybank.comからデータをダウンロードしないようにするためのXMLHttpRequestの基本的なセキュリティ機能です。残念ながら、ローカルファイルからのテストは困難です。

データまたは選択した数のサイトがあるanyサイトを信頼する場合は、Access-Control-Allow-Origin特定のサイトの通過を許可します。

詳細については、 https://developer.mozilla.org/en/http_access_control を参照してください。

5
Brian Nickel

私が言えることは、あなたのサーバーはリクエストでJSONPをサポートしていないということです。例えば

var getUrl = 'http://webapp.armadealo.com/home.json';
                $.ajax({
                    url : getUrl,
                    type : 'GET',
                    dataType : 'jsonp text',
                    jsonp: 'jsonp',
                    crossDomain : true,
                    success: function() { console.log('Success!'); },
                    error: function() { console.log('Uh Oh!'); },
                });

これは、SyntaxError: invalid label。返されたものは、正しくフォーマットされたJSONPではありません。 jQueryが必要とするため、JSONPとして機能するようにラップする必要があります。

だからあなたが戻ってきていることは正しいですが、それはあなたが必要なものではありません。 JSONP呼び出しに必要なものは次のようになります。

functionName({
  "mall": {
  "name": "South Shore Plaza",
  "city": "Braintree",
  "directory": "/assets/directory/0000/0094/show_floorplan.aspx",
  "postal_code": "02184",
  "street": "250 Granite St",
  "lng": -71.023692,
  "id": 147,
  "phone": "(781) 843-8200",
  "lat": 42.218688,
  "state": "MA"
}
});

...現在返されているのは有効なJavaScriptではなく（それ自体であり、それが何であるか）、それがJSONPの仕組みであるため、応答は実際には実行可能なJavaScriptである必要があります。

そのコードをページ内で<script>ブロック。

データを埋め込んだ直後の場合は、 jQuery-oembed のようなプラグインをお勧めします。データを取得する場合は、JSONを処理するためにサーバー上に何かが必要になり、その後サーバーからデータを取得します。

例えば

jQueryを使用してクロスドメインを作成したいとしましょう。 jQuery $.ajax呼び出しは次のようになります。

$.ajax({
  dataType: 'jsonp',
  data: 'id=test',
  jsonp: 'jsonp_callback',
  url: 'http://www.differentdomain.com/get_data.php',
  success: function () {
    // do something
  },
});

サーバー側で（get_data.phpファイルで）コールバック名を取得し、コールバック関数でラップされたJSON形式でデータを送信する必要があります。このようなもの：

<?php
$jsonp_callback = $_GET['jsonp_callback'];
$data = array('1','2','3');
echo $jsonp_callback . '('.json_encode($data).');';
?>

JSONPは、サーバーがJavaScript関数呼び出しに適切に応答を埋め込む場合にのみ使用できます。

1
yesh

動作するはずです。

  1. Firebugまたは別のデバッグコンソールでリクエストを監視しましたか。何が起こり、応答が返されますか。

  2. same-Origin-policyを考慮してください。このリクエストを行うスクリプトもwebapp.armadealo.comからロードする必要があります。そうでない場合は、jsonp-requestが必要です。見てください： http://api.jquery.com/jQuery.ajax/

1
itinance