在AngularJS中使用$ http服务的JSONP方法

Question

我是AngularJS的相对新手，并成功使用$ http的GET方法作为基本的概念验证应用程序，我现在正尝试使用JSONP方法从远程URL中提取一些JSON我得到了。我在这里创建了一个基本的plunker来展示我正在尝试做的事情：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），但我只是没有得到任何回报......

Answer 1

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"}
]);

服务器应该使用请求字符串中的callback参数来相应地设置响应。

检查您的Plunker's网络活动，您会看到请求正在设置回调参数，但您收到的回复并未包含在内。