3

私は AngularJS の比較的初心者であり、基本的な概念実証アプリに $http の GET メソッドを正常に使用したので、JSONP メソッドを使用してリモート URL から JSON を取得しようとしています。与えられました。私がやろうとしていることを示すために、ここで基本的なプランカーを作成しました: http://plnkr.co/edit/Joud0ukAzhgvNM0h9KjB?p=preview

次のように、コントローラー内で HTTP リクエストを使用しています。

    $http({method: 'jsonp', url: 'http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=JSON_CALLBACK'}).
  success(function(data) {
    $scope.countries = data;
    console.log('success');
  }).
  error(function(data) {
    console.log('error');
  });

...しかし、何も返されません (コンソールの「エラー」を除く)。URL が有効な JSON ( http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0 ) を返していることはわかっていますが、何も返ってこないだけ…

4

1 に答える 1

10

JSONP では、JSON 応答を Javascript 関数呼び出しにラップする必要があります。JSONP を実行すると、リクエスト クエリ文字列によって「callback」というパラメータが設定され、JSON レスポンスをラップする方法がサーバーに伝えられます。

したがって、応答は次のようになります。

callback([
    {"id": "1", "name": "John Doe"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

Angular は、応答を待っているリクエストの数に応じて、コールバック パラメータを angular.callbacks._0、angular.callbacks._1、angular.callbacks._2 として定義します。したがって、単一のリクエストを実行すると、応答は次のようになります。

angular.callbacks._0([
    {"id": "1", "name": "Lorem ipsum"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

サーバーは、リクエスト文字列のコールバック パラメータを使用して、それに応じてレスポンスを設定する必要があります。

Plunker のネットワーク アクティビティを確認すると、リクエストがコールバック パラメータを設定していることがわかりますが、取得しているレスポンスはそれでラップされていません。

ここに画像の説明を入力

于 2013-06-12T10:41:44.310 に答える