15

クロスサイトスクリプティングを行う必要があります。以下のコード ブロックには 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"})"

更新 上記は有効であり、成功メソッドが実行されています。オブジェクトを解析する方法を理解する必要があります。答えがわかったらまた投稿します。

4

2 に答える 2

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;

     }

URL に が含まれていることに注意してください?callback=JSON_CALLBACK。 ここに素晴らしいスタックオーバーフローがあります。 応答を取得すると、次のような json が返されます。 

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

これは、その主題に関する素晴らしいスタックオーバーフローです

GETここで私が得た 1 つの部分は、サーバーがパラメーターを返さなければならないということcallbackです。これはそのための良いチュートリアルです。 http://niryariv.wordpress.com/2009/05/05/jsonp-quickly/したがって、json は上記のようになります。

まあ、これが将来誰かに役立つことを願っています。

于 2013-11-11T23:37:50.063 に答える
1

$http サービスを介して複数の JSONP リクエストを作成する場合は、ちょっとしたハックを使用する必要があります。JSON_CALLBACK を内部値に Agular に変更し、次の解決策を使用する最善の方法: この js コードを返された js ファイルに入れます。

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

このコードが機能することを確認するには、Angular ソースのcreateHttpBackendメソッドを確認してください。

于 2016-03-14T12:23:51.547 に答える