Question

我试图通过使用以下Angular代码使用http://www.soe.gr/photos.txt创建的以下地址Flickr API来获取一些JSON数据：

angular.module('myapp', ['ngResource']).
controller('MyController', ['$scope', '$resource', function ($scope,$resource) {
    $scope.photoAPI = $resource("http://www.soe.gr/photos.txt",
{ callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }});
$scope.photos=$scope.photoAPI.get();
}]);

我正在使用$resource因为我试图从其他域获取数据而不被阻止。但是，我收到以下错误：Uncaught ReferenceError: jsonFlickrFeed is not defined。

我的第一个问题是这种打字究竟是什么： jsonFlickrFeed({...})
我的第二个问题当然是，如何将上述JSON对象的 items 属性放入我的$ scope中，以便操作它们并继续我的代码，因为我被卡住了！谢谢

Answer 1

$ resource用于处理REST API，即使可以使用jsonp重新定义get方法也没用，最好使用$ http来实现：

  var url = "http://www.soe.gr/photos.txt?callback=JSON_CALLBACK";
  $http.jsonp(url).then(function(response) {
    console.log(response.data);
  });

什么是JSONP：https://en.wikipedia.org/wiki/JSONP

JSONP（带填充的JSON）是Web开发人员使用的一种技术，用于克服浏览器强加的跨域限制，允许从服务页面之外的系统检索数据。

它的主要观点是它没有加载JSON数据，而是加载脚本，你可以看到函数调用json数据作为参数 - 在你的文件中你可以看到jsonFlickrFeed（{...}）。但功能需要存在。在AngularJS应用程序中，angular透明地为您提供它，并将其生成的名称发送到请求的脚本而不是参数中的JSON_CALLBACK。

但是这里你的端点可能只是静态文件而不是脚本，可以通过给定的自定义回调函数提供JSONP响应。

你可以看到它在这里工作 - http://jsbin.com/becufenepo/edit?js,console

其url包含参数jsoncallback = JSON_CALLBACK，angular发送生成的名称，在网络控制台中可以看到

的请求

https://www.flickr.com/services/rest/ ... &jsoncallback=angular.callbacks._0

然后它的响应包含函数调用angular.callbacks._0({})

这就是全部，所以主要原因是你的终点不能提供jsonp。

使用Angular从API获取JSON数据

1 个答案: