在angular.js中parsingJSONP $ http.jsonp()响应

我正在使用angular的$http.jsonp()请求,它成功地返回包装在一个函数中的json:

 var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback"; $http.jsonp(url). success(function(data, status, headers, config) { //what do I do here? }). error(function(data, status, headers, config) { $scope.error = true; }); 

如何访问/parsing返回的函数包装的JSON?

更新:自从angular1.6

您不能再使用JSON_CALLBACKstring作为占位符来指定callback参数值的位置

你现在必须像这样定义callback:

$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})

通过$http.defaults.jsonpCallbackParam更改/访问/声明参数,默认为callback

注意:您还必须确保您的URL已添加到受信任/白名单中:

$sceDelegateProvider.resourceUrlWhitelist

或通过以下方式显式信

$sce.trustAsResourceUrl(url)

使用:

 var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts" var trustedUrl = $sce.trustAsResourceUrl(url); $http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'}) .success(function(data){ console.log(data.found); }); 

以前的答案:Angular 1.5.x和之前的版本

所有你应该做的就是改变callback=jsonp_callback callback=JSON_CALLBACK像这样:

 var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; 

然后,如果返回成功,你的.success函数应该像你一样开火。

这样做,使您不必肮脏的全球空间。 这在这里的AngularJS文档中有logging。

更新马特球的小提琴使用此方法: http : //jsfiddle.net/subhaze/a4Rc2/114/

完整的例子:

 var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; $http.jsonp(url) .success(function(data){ console.log(data.found); }); 

最重要的事情我不明白的一点是,请求必须包含“callback = JSON_CALLBACK”,因为AngularJS 修改了请求URL ,用一个唯一的标识符replace“JSON_CALLBACK”。 服务器响应必须使用“callback”参数的值而不是硬编码“JSON_CALLBACK”:

 JSON_CALLBACK(json_response); // wrong! 

由于我正在编写我自己的PHP服务器脚本,我以为我知道它需要什么函数名称,并且不需要在请求中传递“callback = JSON_CALLBACK”。 大错!

AngularJS用一个唯一的函数名(如“callback = angular.callbacks._0”)replace请求中的“JSON_CALLBACK”,服务器响应必须返回该值:

 angular.callbacks._0(json_response); 

这非常有帮助。 Angular不能像JQuery一样工作。 它有自己的jsonp()方法,在查询string的末尾确实需要“&callback = JSON_CALLBACK”。 这是一个例子:

 var librivoxSearch = angular.module('librivoxSearch', []); librivoxSearch.controller('librivoxSearchController', function ($scope, $http) { $http.jsonp('http://librivox.org/api/feed/audiobooks/author/Melville?format=jsonp&callback=JSON_CALLBACK').success(function (data) { $scope.data = data; }); }); 

然后在您的Angular模板中显示或操作{{data}}。

这应该适合你,只要在全局范围内可以看到jsonp_callback函数:

 function jsonp_callback(data) { // returning from async callbacks is (generally) meaningless console.log(data.found); } var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback"; $http.jsonp(url); 

完整的演示: http : //jsfiddle.net/mattball/a4Rc2/ (免责声明:我从来没有写过任何AngularJS代码)

你仍然需要在params中设置callback

 var params = { 'a': b, 'token_auth': TOKEN, 'callback': 'functionName' }; $sce.trustAsResourceUrl(url); $http.jsonp(url, { params: params }); 

其中“函数名”是对全局定义函数的string化引用。 您可以在angular度脚本之外定义它,然后在模块中重新定义它。

为了parsing,

  $http.jsonp(url). success(function(data, status, headers, config) { //what do I do here? $scope.data=data; }). 

或者你可以使用`$ scope.data = JSON.Stringify(data);

在Angular模板中,你可以使用它

 {{data}} 

对于我来说,上述解决scheme只工作一次我添加“format = jsonp”的请求参数。

我正在使用angular度1.6.4和由subhaze提供的答案不适合我。 我修改了一下,然后工作 – 你必须使用由$ sce.trustAsResourceUrl返回的值。 完整代码:

 var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts" url = $sce.trustAsResourceUrl(url); $http.jsonp(url, {jsonpCallbackParam: 'callback'}) .then(function(data){ console.log(data.found); });