如何发出 jsonp 请求
Posted
技术标签:
【中文标题】如何发出 jsonp 请求【英文标题】:How to make a jsonp request 【发布时间】:2013-11-23 20:17:34 【问题描述】:我需要编写一些跨站点脚本。下面的代码块包含jsonp的方法,该方法返回好像失败了,但是当我将其更改为get请求时,我就成功了。我需要能够使用 jsonp 方法成功响应。可以排除以下情况。响应是有效的 json,这个参数在 url ?callback=JSON_CALLBACK 中。这是我从执行 http 请求和执行此代码的代码块中收到的 json。
http响应状态码200
["cube":"1" ,"points":"160","cube":"2","points":"690","cube":"3","points":"331"]
代码块
var myApp = angular.module('test', []);
myApp.controller('UserCtrl', function($scope, users)
$scope.usersPerCube = users.getUsers();
)
myApp.factory('users', function($http)
return
getUsers: function()
var deferred = $q.defer();
var url = "http://localhost/api/api/index.php/analytics/UsersPerCube?callback=JSON_CALLBACK";
$http.get(url).success(function (data, status, headers, config)
console.log(data);
deferred.resolve(data);
).error(function (data, status, headers, config)
//this always gets called
console.log(status);
deferred.reject(status);
);
return deferred.promise;
请注意,我已经编辑了我的服务器端代码,现在收到了
"angular.callbacks._1( "cube":"1","points":"160","cube":"2","points":"690","cube":"3","points":"331")"
更新 以上是有效的,现在成功方法正在执行。我只需要弄清楚如何解析对象。等我找到答案再发帖。
【问题讨论】:
您请求的服务器是否理解 JSONP(尤其是callback
查询字符串值)?
如果您的响应是有效的 JSON,那么它不是有效的 JSONP。 JSONP 是用函数包装的 JSON 数据。对于@Alxandr,您确定要返回 JSONP 吗?
我拥有这个堆栈溢出所建议的一切,以使其在服务器端成为有效的 jsonp。 ***.com/questions/9519209/how-do-i-set-up-jsonp 。还有 angular.callbacks._1 的角度响应,这意味着它将其识别为 jsonp。我只是不确定现在应该如何处理回复。
【参考方案1】:
如果你想通过 $http 服务发出多个 JSONP 请求,你应该使用一点技巧。定期将 JSON_CALLBACK 更改为内部值,以及使用下一个解决方案的最佳方法:将此 js 代码放入返回的 js 文件中:
var callbackId = '_' + (angular.callbacks.counter - 1).toString(36);
angular.callbacks[callbackId](/* YOUR JSON */);
为确保此代码适用于您,请检查角度来源中的 createHttpBackend 方法。
【讨论】:
【参考方案2】:我决定详细说明如何发出jsonp 请求,这样其他人就不会遇到和我一样的麻烦。
myApp.factory('users', function($http)
return
getUsers: function()
var deferred = $q.defer();
var url = "http://localhost/api/api/index.php/analytics/UsersPerCube?callback=JSON_CALLBACK";
$http.get(url).success(function (data, status, headers, config)
console.log(data);
deferred.resolve(data);
).error(function (data, status, headers, config)
//this always gets called
console.log(status);
deferred.reject(status);
);
return deferred.promise;
请注意,该 url 包含 ?callback=JSON_CALLBACK
。 Here is a nice *** on that. 收到回复后,您将收到如下所示的 json。
"angular.callbacks._1( "cube":"1","points":"160","cube":"2","points":"690","cube":"3","points":"331")"
Here is a nice *** on that subject
现在让我感到困惑的是服务器必须返回GET
参数callback
。这是一个很好的教程。 http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/ 所以 json 看起来像上面的那个。
嗯,我希望这对将来的人有所帮助。
【讨论】:
您的回复内容类型是什么?我有一个小问题,浏览器无法显示响应,因为它强制下载它。并且响应内容类型是“application/jsonp” 有什么理由不使用$http.jsonp()
并手动创建一个promise,因为前者已经返回一个?以上是关于如何发出 jsonp 请求的主要内容,如果未能解决你的问题,请参考以下文章
是否可以从 HTTPS 向 HTTP 发出 JSONP 请求?
如何将 @RequestBody 与 JSONP 请求一起使用?