我正在使用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;
});
如何访问/解析返回的函数封装的JSON?
更新:自Angular 1.6以来
不能再将JSON_CALLBACK字符串用作指定回调参数值应该放在的哪个位置
您现在必须这样定义回调:
$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})
通过$http.defaults.jsonpCallbackParam
更改/访问/声明参数,默认为callback
注意:您还必须确保您的URL已添加到可信/白名单:
$sceDelegateProvider.resourceUrlWhitelist
或通过明确信任
$sce.trustAsResourceUrl(url)
success/error
已被弃用。
$http
遗留的promise方法success
和error
已被弃用,并将在v1.6.0中删除。请改用标准然后的方法。如果$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);
});
上一个答案: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文档中对此进行了说明。
更新了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);
});
最重要的一件事我很长一段时间都不明白,请求必须包含"callback=JSON_callback",因为AngularJS修改了请求url,用一个唯一的标识符代替了"JSON_callback"。服务器响应必须使用"callback"参数的值,而不是硬编码"JSON_callback":
JSON_CALLBACK(json_response); // wrong!
由于我正在编写自己的PHP服务器脚本,我认为我知道它想要什么函数名,不需要在请求中传递"callback=JSON_callback"。大错特错!
AngularJS将请求中的"JSON_CALLBACK"替换为唯一的函数名(如"CALLBACK=angular.callbacks._0"),服务器响应必须返回该值:
angular.callbacks._0(json_response);
这非常有帮助。Angular的工作方式与JQuery不同。它有自己的JSON()方法,在查询字符串的末尾确实需要"&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
});
其中"functionName"是对全局定义函数的字符串化引用。您可以在角度脚本之外定义它,然后在模块中重新定义它。
要进行解析,请执行以下操作-
$http.jsonp(url).
success(function(data, status, headers, config) {
//what do I do here?
$scope.data=data;
}).
或者您可以使用`$scope.data=JSON.Stringify(数据);
在Angular模板中,您可以将其用作
{{data}}
对我来说,只有在我向请求参数添加"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);
});