解析angular.js中的JSONP $ http.jsonp()响应

Question

我正在使用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？

Answer 1

更新:自Angular 1.6

您不能再使用JSON_CALLBACK字符串作为占位符来指定回调参数值应该去的位置

您现在必须定义回调,如下所示:

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

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

注意:您还必须确保将您的网址添加到可信/白名单中:

$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文档中记录在这里.

更新了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);
    });

Answer 2

在最重要的事情我并没有很长一段时间明白的是,要求必须含有"回调= 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);

Answer 3

这非常有帮助.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模板中显示或操作{{data}}.

Answer 4

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