コードは非常に単純です。なぜそれが機能しないのかわかりません。
これは、JSONファイルhttp://webapp.armadealo.com/home.jsonへのリンクです。
getJSONを使用したコードは次のとおりです
$.getJSON("http://webapp.armadealo.com/home.json", function(data){
alert(data);
});
コードにJSONコンテンツ全体を表示させたいだけです。
コードは非常に単純です。なぜそれが機能しないのかわかりません。
これは、JSONファイルhttp://webapp.armadealo.com/home.jsonへのリンクです。
getJSONを使用したコードは次のとおりです
$.getJSON("http://webapp.armadealo.com/home.json", function(data){
alert(data);
});
コードにJSONコンテンツ全体を表示させたいだけです。
何ヶ月にもわたる検索の結果、私は解決策を見つけました。したがって、私は自分の質問に答えています。
JSONがサポートされておらず、同一生成元ポリシーに固執している場合は、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);
}
Chrome インスペクタを見ると、おそらく次のエラーが表示されます。
XMLHttpRequest はhttp://webapp.armadealo.com/home.jsonを読み込めません。オリジンhttp://stackoverflow.comは Access-Control-Allow-Origin で許可されていません。
これが意味することは、サーバーがクライアント Web ページにファイルを読み取らせたくないということです。クライアントは信頼されていません。これは、mybank.evil.com のようなサイトが mybank.com からデータをダウンロードするのを防ぐための XMLHttpRequest の基本的なセキュリティ機能です。残念ながら、ローカル ファイルからのテストは困難です。
データまたは選択した数のサイトを信頼するAccess-Control-Allow-Origin
サイトがある場合は、特定のサイトの通過を許可するようにサーバー スクリプトを構成できます。
詳細については、 https://developer.mozilla.org/en/http_access_controlを参照してください。
それはうまくいくはずです。
firebug または別のデバッグ コンソールでリクエストを確認しましたか?
same-origin-policyを検討してください。したがって、このリクエストを行うスクリプトも webapp.armadealo.com からロードする必要があります。そうでない場合は、jsonp-request が必要です。見てください:http://api.jquery.com/jQuery.ajax/
私が言えることは、あなたのサーバーはリクエストで 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 関数呼び出しに適切に埋め込む場合にのみ使用できます。