angularjs - 在 AngularJS 中为 $http 服务使用 JSONP 方法

Question

我是 AngularJS 的相对新手，并且已经成功地将 $http 的 GET 方法用于基本的概念验证应用程序，我现在正在尝试使用 JSONP 方法从远程 URL 中提取一些 JSON我被给了。我在这里创建了一个基本的 plunker 来展示我正在尝试做的事情:http://plnkr.co/edit/Joud0ukAzhgvNM0h9KjB?p=preview

我在 Controller 中使用 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 时，请求查询字符串将设置一个名为“回调”的参数，该参数将告诉您的服务器如何包装 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's网络事件，您将看到请求正在设置回调参数，但您得到的响应没有被它包装。