web-dev-qa-db-fra.com

Comment faire une demande jsonp

J'ai besoin de faire du script intersite. Le bloc de code ci-dessous contient la méthode de jsonp, la méthode retourne comme si elle échouait, mais lorsque je la change en requête get, je réussis. Je dois être capable d'une réponse réussie en utilisant la méthode jsonp. Ce qui suit peut être exclu. La réponse est valide json et ce paramètre est dans l'URL? Callback = JSON_CALLBACK. Voici le JSON que je reçois de faire la demande http et le bloc de code qui exécute ce code.

code de statut de réponse http 200

[{"cube":"1" ,"points":"160"},{"cube":"2","points":"690"},{"cube":"3","points":"331"}]

bloc de 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;

     }
   }

Notez que j'ai modifié mon code côté serveur et que je reçois maintenant 

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

UPDATE Ce qui précède est valide et la méthode success est en cours d'exécution. Je dois juste comprendre comment analyser les objets. Je posterai à nouveau une fois que je trouverai la réponse.

javascriptjsonangularjs
14
raging_subs

J'ai décidé de donner une description détaillée de la façon de faire une requête jsonp afin que les autres ne rencontrent pas les mêmes problèmes que moi. 

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;

     }

Notez que l'URL contient ?callback=JSON_CALLBACK. Voici un stackoverflow de Nice à ce sujet. Une fois que vous avez obtenu la réponse, vous recevrez un JSON comme celui ci-dessous. 

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

Voici un stackoverflow de Nice sur ce sujet

Maintenant, la partie qui m’a convaincue est que le serveur doit renvoyer le GET param, callback. Voici un bon tutoriel pour ça. http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/ Le json ressemble donc à celui ci-dessus. 

J'espère que cela aidera quelqu'un dans le futur.

29
raging_subs

Si vous souhaitez effectuer plusieurs requêtes JSONP via le service $ http, vous devez utiliser un petit hack. Changer agular JSON_CALLBACK en valeur interne et meilleur moyen d’utiliser la solution suivante: mettez ce code js dans votre fichier js renvoyé:

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

Pour être sûr que ce code fonctionnera pour vous, veuillez vérifier createHttpBackend method dans les sources angulaires.

1
Stanislau Tsishkou