如何发出 jsonp 请求

IT技术 javascript json angularjs
2021-02-21 17:39:56

我需要做一些跨站点脚本。下面的代码块包含 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"})"

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

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. 这是一个很好的 stackoverflow。 收到响应后,您将收到如下所示的 json。

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

这是关于该主题的一个很好的计算器

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

好吧,我希望这对将来的某人有所帮助。

你的回复内容类型是什么?我有一个小问题,浏览器无法显示响应,因为它强制下载它。并且响应内容类型是“application/jsonp”
2021-04-17 17:39:56
有什么理由不使用$http.jsonp()和手动创建Promise,因为前者已经返回了一个Promise?
2021-05-05 17:39:56

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

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

为确保此代码对您有用,请检查angular 源中的createHttpBackend方法。