如何用角度js调用jsonp

时间:2015-05-18 16:04:49

标签: javascript jquery angularjs jsonp

我正在尝试使用jsonp在我的表中获取数据。我真的不知道我做错了什么。我认为它与我的网址内容有关。或者说我没有正确获取数据。我试过做callback = JSON_callback。仍然无效。

这是我的网址http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=JSON_CALLBACK

内容:

callback([{"naam":"Hogeschool InHolland","docenten":null,"id":null},{"naam":"Hogeschool Utrecht","docenten":null,"id":null},{"naam":"Universiteit Utrecht","docenten":null,"id":null}])

app.js:

 angular.module('OrganisatieApp', [
'OrganisatieApp.controllers',
'OrganisatieApp.services'
 ]);

services.js:

  angular.module('OrganisatieApp.services', [])
.factory('organisatieAPIservice', function($resource,$http) {

    var organisatieAPIservice = [];
organisatieAPIservice.getOrganisaties = function(){
    return $http({
        method: 'jsonp',
        url: 'http://jbossews-themaopdracht78.rhcloud.com/rest/json/org/JSONP/Organisaties?callback=callback'
    });

}
        return organisatieAPIservice;
        });

我的Html div:

     <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Organisatie naam</th>
                        <th>Organisatie plaats</th>
                        <th>Organisatie Curriculum</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="organisatie in organisatieList">
                        <td>{{$index + 1}}</td>
                        <td>
                            <img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
                            {{organisatie.Organisatie.naam}}&nbsp;{{organisatie.Organisatie.docenten}}
                        </td>
                        <td>{{organisatie.Constructors[0].provincie}}</td>
                        <td>{{organisatie.curriculum}}</td>
                    </tr>
                    </tbody>
                </table>
                <ng-view></ng-view>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="page-header">
            <h1>Opleidingsprofiel</h1>

        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <ul class="nav nav-pills" role="tablist">
                        <li role="presentation"><a href="#">Aantal Organisaties<span class="badge">3</span></a></li>
                    </ul>
                </h3>
            </div>



            <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Organisatie naam</th>
                        <th>Organisatie plaats</th>
                        <th>Organisatie Curriculum</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="organisatie in organisatieList">
                        <td>{{organisatie.Organisatie.id}}</td>
                        <td>
                            <img src="/img/logos/{{organisatie.Organisatie.logo}}.png" />
                            {{organisatie.Organisatie.naam}}&nbsp;{{organisatie.Organisatie.docenten}}
                        </td>
                        <td>{{organisatie.Constructors[0].naam}}</td>
                        <td>{{organisatie.naam}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

controller.js:

       angular.module('OrganisatieApp.controllers', []).
controller('organisatieController',function($scope, organisatieAPIservice) {

    $scope.organisatieList = [];

        organisatieAPIservice.getOrganisaties().success(function (response) {
            //Assign response in Callback
            $scope.organisatieList = response.docenten;
        });
 });

1 个答案:

答案 0 :(得分:0)

回调的名称应为&#34; JSON_CALLBACK&#34;

https://docs.angularjs.org/api/ng/service/ $ HTTP#JSONP