AngularJS:如何使JSONP请求 [英] AngularJS: how to make a jsonp request
问题描述
我需要做一些跨站点脚本。低于code的块包含JSONP的方法,该方法返回,如果它失败了,但是当我改变这是一个GET请求,然后我有成功。我需要能够使用JSONP方法成功的响应。以下可以排除。响应有效JSON和这个参数是在url?回调= JSON_CALLBACK。下面是我从做http请求和code块执行此code接收JSON。
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.
HTTP响应状态code 200
http response status code 200
[{"cube":"1" ,"points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"}]
code座
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;
}
}
请注意,我已经编辑了我的服务器端code和现在接受
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"})"
更新的
以上是有效的,现在的成功方法正在执行。我只需要弄清楚如何解析的对象。一旦我找出了答案,我会再次发布。
UPDATE The 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.
推荐答案
我已经决定给出了如何做一个像我一样JSONP 要求,这样其他人就不会遇到同样的麻烦。
I have decided to give a detailed description of how to do a jsonp request so others will not run into the same troubles as I did.
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;
}
注意,网址中包含?回调= JSON_CALLBACK
。 <一href=\"http://stackoverflow.com/questions/12066002/parsing-jsonp-http-jsonp-response-in-angular-js\">Here是上一个不错的计算器。一旦你得到了响应,那么您会收到类似下面的一个JSON。
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.
"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"
以下是关于这个主题一个不错的计算器
现在这让我的一部分是服务器有返回 GET
参数,回调
。这里是一个很好的教程为。 <一href=\"http://niryariv.word$p$pss.com/2009/05/05/jsonp-quickly/\">http://niryariv.word$p$pss.com/2009/05/05/jsonp-quickly/因此,JSON看起来像上面的。
Now the one part that got me is that the server has to return the GET
param, 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.
嗯,我希望这可以帮助别人的未来。
Well, I hope this helps someone in the future.
这篇关于AngularJS:如何使JSONP请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!