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

javascript angularjs jsonp

2022-08-30 05:31:22

我正在使用angular的请求，它成功地返回了包裹在函数中的json：$http.jsonp()

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

更新：自 Angular 1.6 起

不能再使用JSON_CALLBACK字符串作为占位符来指定回调参数值应位于何处

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

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

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

注意：您还必须确保您的网址已添加到受信任/白名单中：

$sceDelegateProvider.resourceUrlWhitelist

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

$sce.trustAsResourceUrl(url)

已成功/错误已弃用。

旧版 promise 方法已被弃用，并将在 v1.6.0 中删除。请改用标准然后方法。如果设置为，则这些方法将抛出 .$httpsuccesserror$httpProvider.useLegacyPromiseExtensionsfalse$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_callbackcallback=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);
    });

答案 2

我有很长一段时间没有理解的最重要的事情是，请求必须包含“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);

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

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