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

如何访问/解析返回的function-wrapped-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为deprecated 。

{@ 1}}旧版承诺方法$http和success已弃用，将在v1.6.0中删除。请改用标准方法。如果error设置为$httpProvider.useLegacyPromiseExtensions，则这些方法将抛出false。

使用：

$http/legacy error

上一个答案：Angular 1.5.x及之前

您应该做的就是将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); });更改为callback=jsonp_callback，如下所示：

callback=JSON_CALLBACK

如果返回成功，那么你的var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";函数应该像你拥有它一样。

这样做可以避免弄脏全局空间。这在AngularJS文档here中有记录。

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

完整示例：

.success

Answer 2

最重要的事情我很久不理解请求必须包含“callback = JSON_CALLBACK”，因为AngularJS 修改了请求网址，用唯一标识符替换“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（）方法，它确实需要＆＃34;＆amp; callback = JSON_CALLBACK＆＃34;在查询字符串的末尾。这是一个例子：

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代码）

Answer 5

您仍然需要在参数中设置callback：

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

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

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

Answer 6

对于解析，请执行此操作 -

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

或者你可以使用 `$ scope.data = JSON.Stringify（数据）;

在Angular模板中，您可以将其用作

{{data}}

Answer 7

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

Answer 8

我正在使用角度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);
    });

解析angular.js中的JSONP $ http.jsonp（）响应

8 个答案: