在angular.js中解析JSONP $ 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;
});
如何访问/解析返回的函数包装的JSON?
更新:自从角1.6
您不能再使用JSON_CALLBACK字符串作为占位符来指定回调参数值的去向
您现在必须像这样定义回调:
$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})
通过$http.defaults.jsonpCallbackParam
更改/访问/声明参数,默认为callback
注意:您还必须确保您的URL已添加到受信任/白名单中:
$sceDelegateProvider.resourceUrlWhitelist
或通过以下方式显式信任:
$sce.trustAsResourceUrl(url)
success/error
已被弃用 。
$http
传统承诺方法的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文档中有记录。
更新马特球的小提琴使用此方法: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那样工作。 它有自己的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;
});
});
然后在您的Angular模板中显示或操作{{数据}}。
链接地址: http://www.djcxy.com/p/46187.html