如何发出 jsonp 请求
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19916362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a jsonp request
提问by raging_subs
I need to do some cross site scripting. The block of code below contains the method of jsonp, the method returns as if it failed, but when I change it to be a get request I then have success. I need to be able to a successful response using the jsonp method. The following can be ruled out. The response is valid json and this param is in the url ?callback=JSON_CALLBACK. Here is the json I receive from doing the http request and the code block that executes this code.
我需要做一些跨站点脚本。下面的代码块包含 jsonp 的方法，该方法返回好像失败了，但是当我将其更改为 get 请求时，我就成功了。我需要能够使用 jsonp 方法成功响应。可以排除以下情况。响应是有效的 json，这个参数在 url 中？callback=JSON_CALLBACK。这是我从执行 http 请求和执行此代码的代码块中收到的 json。
http response status code 200
http响应状态码200
[{"cube":"1" ,"points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"}]
code block
代码块
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;
}
}
Note that I have edited my server side code and now receive
请注意，我已经编辑了我的服务器端代码，现在收到
"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"
UPDATEThe above is valid and now the success method is executing. I just need to figure out how to parse the objects. I will post again once I figure out the answer.
UPDATE以上是有效的，现在成功方法正在执行。我只需要弄清楚如何解析对象。一旦我找到答案，我会再次发布。
回答by raging_subs
I have decided to give a detailed description of how to do a jsonprequest so others will not run into the same troubles as I did.
我决定详细说明如何执行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;
}
Notice that the url contains ?callback=JSON_CALLBACK. Here is a nice stackoverflow on that.Once you get the response then you'll receive a json like the one below.
请注意，该 url 包含?callback=JSON_CALLBACK. 这是一个很好的stackoverflow。收到响应后，您将收到如下所示的 json。
"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"
Here is a nice stackoverflow on that subject
Now the one part that got me is that the server has to return the GETparam, callback. Here is a good tutorial for that. http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/So the json looks like the one above.
现在让我知道的一个部分是服务器必须返回GET参数，callback. 这是一个很好的教程。 http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/所以 json 看起来像上面的那个。
Well, I hope this helps someone in the future.
好吧，我希望这对将来的某人有所帮助。
回答by Stanislau Tsishkou
If you want to make several JSONP requests through $http service, you should use a little hack. Agular change JSON_CALLBACK to internal value, and best way to use next solution: put this js code into your returned js-file:
如果您想通过 $http 服务发出多个 JSONP 请求，您应该使用一点技巧。Agular 将 JSON_CALLBACK 更改为内部值，以及使用下一个解决方案的最佳方法：将此 js 代码放入您返回的 js 文件中：
var callbackId = '_' + (angular.callbacks.counter - 1).toString(36);
angular.callbacks[callbackId](/* YOUR JSON */);
To be sure that this code will work for you, please check createHttpBackendmethod in angular sources.
为确保此代码对您有用，请检查angular 源中的createHttpBackend方法。
