如何发出jsonp请求

时间:2013-11-11 21:32:08

标签: javascript json angularjs

我需要做一些跨站点脚本。下面的代码块包含jsonp的方法,该方法返回就好像失败了,但当我将其更改为get请求时,我就获得了成功。我需要能够使用jsonp方法成功响应。可以排除以下内容。响应是有效的json,这个param在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"})"

更新 的 以上是有效的,现在成功方法正在执行。我只需要弄清楚如何解析对象。一旦我找到答案,我会再次发帖。

2 个答案:

答案 0 :(得分:29)

我已决定详细说明如何执行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;

     }  

请注意,网址包含?callback=JSON_CALLBACKHere is a nice stackoverflow on that.一旦你收到回复,你就会得到一个类似下面的json。

"angular.callbacks._1( {"cube":"1","points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"})"

Here is a nice stackoverflow on that subject

现在让我的一个部分是服务器必须返回GET参数,callback。这是一个很好的教程。 http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/所以json看起来像上面那个。

好吧,我希望将来可以帮助某人。

答案 1 :(得分:1)

如果你想通过$ http服务发出几个JSONP请求,你应该使用一点hack。 Agular将JSON_CALLBACK更改为内部值,以及使用下一个解决方案的最佳方法:将此js代码放入返回的js文件中:

var callbackId = '_' + (angular.callbacks.counter - 1).toString(36);
angular.callbacks[callbackId](/* YOUR JSON */);

为确保此代码适合您,请检查角度来源中的 createHttpBackend 方法。