parsing JSONP $http.jsonp() response in angular.js

I am using angular's $http.jsonp() request which is successfully returning json wrapped in a function:

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

How to access/parse the returned function-wrapped-JSON?

213950 次浏览
小开

只要函数 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 代码)

小开
最佳答案

最新消息: 自角度1.6

不能再使用 JSON _ CALLback 字符串作为 指定回调参数值的位置

您现在必须像下面这样定义回调:

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

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

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

$sceDelegateProvider.resourceUrlWhitelist

或通过以下途径获得明确信任:

$sce.trustAsResourceUrl(url)

success/error为 deprecated 。

$http遗留的承诺方法 success和 error已被废弃，将在 v1.6.0中删除。使用标准的 then 方法代替。如果 $httpProvider.useLegacyPromiseExtensions设置为 false，那么这些方法将抛出 $http/legacy error。

使用方法:

var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts"
var trustedUrl = $sce.trustAsResourceUrl(url);


$http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
.then(function(data){
console.log(data.found);
});

上一个答案: 角度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 文档 给你中有记录。

更新 Matt Ball 的小提琴使用这个方法: 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);
});
小开

有一段时间我不太明白的是，请求 MUST包含“ callback = JSON _ CALlback”，因为 AngularJS 修改请求 URL用一个唯一标识符代替了“ JSON _ CALlback”。服务器响应必须使用‘ callback’参数的值，而不是硬编码“ JSON _ CALLback”:

JSON_CALLBACK(json_response);  // wrong!

Since I was writing my own PHP server script, I thought I knew what function name it wanted and didn't need to pass "callback=JSON_CALLBACK" in the request. Big mistake!

AngularJS 用唯一的函数名(如“ callback = angular.callbacks._ 0”)替换请求中的“ JSON _ CALLBack”，服务器响应必须返回该值:

angular.callbacks._0(json_response);
小开

这很有帮助。Angular 的工作原理和 JQuery 不完全一样。它有自己的 jsonp ()方法，该方法的确需要在查询字符串的末尾加上“ & 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;
});
});

然后在角度模板中显示或操作\{\{ data }}。

小开

对于解析，这样做-

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

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

在角度模板，你可以使用它作为

\{\{data}}
小开

You still need to set callback in the params:

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


$http.jsonp(url, {
params: params
});

其中“ FunctionName”是对全局定义函数的字符串引用。您可以在角度脚本之外定义它，然后在模块中重新定义它。

小开

对我来说，上述解决方案只有在我将“ format = jsonp”添加到请求参数中时才起作用。

小开

我使用角度1.6.4，而 亚烟雾提供的答案对我来说不起作用。我稍微修改了一下，然后它就工作了——你必须使用 $sce.trust AsResourceUrl返回的值。完整代码:

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

提交答案