在 angular.js 中解析 JSONP $http.jsonp() 响应 [英] parsing JSONP $http.jsonp() response in angular.js

问题描述

我正在使用 angular 的 $http.jsonp() 请求，该请求成功返回封装在函数中的 json:

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

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

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

推荐答案

更新:自 Angular 1.6

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

You can no longer use the JSON_CALLBACK string as a placeholder for specifying where the callback parameter value should go

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

You must now define the callback like so:

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

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

Change/access/declare param via $http.defaults.jsonpCallbackParam, defaults to callback

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

Note: You must also make sure your URL is added to the trusted/whitelist:

$sceDelegateProvider.resourceUrlWhitelist

或通过以下方式明确信任:

or explicitly trusted via:

$sce.trustAsResourceUrl(url)

成功/错误是已弃用.

success/error were deprecated.

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

The $http legacy promise methods success and error have been deprecated and will be removed in v1.6.0. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false then these methods will throw $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，如下所示:

All you should have to do is change callback=jsonp_callback to callback=JSON_CALLBACK like so:

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

然后，如果返回成功，您的 .success 函数应该像您一样触发.

And then your .success function should fire like you have it if the return was successful.

这样做可以使您不必弄脏全局空间.这在 AngularJS 文档这里中有记录.

Doing it this way keeps you from having to dirty up the global space. This is documented in the AngularJS documentation here.

更新 Matt Ball 的小提琴以使用此方法:http://jsfiddle.net/subhaze/a4Rc2/114/

Updated Matt Ball's fiddle to use this method: 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);
    });

这篇关于在 angular.js 中解析 JSONP $http.jsonp() 响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！