113

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

4

8 回答 8

302

更新：从 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 中删除。请改用标准 then 方法。如果$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);
    });
于 2012-11-15T15:13:33.580 回答
69

我有一段时间不明白的最重要的事情是请求必须包含“callback=JSON_CALLBACK”，因为 AngularJS修改了请求 url，用唯一标识符替换了“JSON_CALLBACK”。服务器响应必须使用“回调”参数的值，而不是硬编码“JSON_CALLBACK”：

JSON_CALLBACK(json_response);  // wrong!

由于我正在编写自己的 PHP 服务器脚本，我想我知道它想要什么函数名，并且不需要在请求中传递“callback=JSON_CALLBACK”。大错！

AngularJS 将请求中的“JSON_CALLBACK”替换为唯一的函数名（如“callback=angular.callbacks._0”），并且服务器响应必须返回该值：

angular.callbacks._0(json_response);
于 2013-10-15T02:11:06.557 回答
9

这很有帮助。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 }}。

于 2014-12-24T02:31:13.963 回答
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 代码）

于 2012-08-22T14:36:16.663 回答
4

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

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

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

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

于 2016-05-16T10:06:24.853 回答
2

对于解析这样做 -

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

或者你可以使用 `$scope.data=JSON.Stringify(data);

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

{{data}}
于 2016-02-08T15:37:24.490 回答
0

我正在使用 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);
    });
于 2017-05-11T06:46:07.643 回答
0

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

于 2016-06-30T08:04:35.770 回答