JSON数据不显示当我改变http.jsonp() URL

Question

我正在尝试使用AngularJS从外部JSON文件读取数据。

这是我的HTML

<div class="panel panel-default" ng-controller="MyAppController">
    <div class="panel-heading">
        <div class="input-group">
            <input ng-model="query" type="text" placeholder="What file are you looking for?" class="form-control"><span ng-click="clearFilter()" ng-disabled="query.length == 0" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
        </div>
    </div>
    <div class="panel list-group">
        <span data-ng-repeat="cat in cats | filter: query" class="list-group-item animate-repeat">{{cat.title}}
    </span>
        <div class="clearfix"></div>
    </div>
</div>

当我在JS文件中使用它时，它工作得很好，数据显示在列表中。

function MyAppController($scope, $http) {     
    var url = 'http://jobs.github.com/positions.json?callback=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
        $scope.cats = data;
    });
}

但是当我改变URL到我的个人网站没有显示，即使我只是从字面上复制和粘贴在github JSON文件的所有内容到本地JSON文件。(只是为了测试一下)

function MyAppController($scope, $http) {     
    var url = 'http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK';
    $http.jsonp(url).success(function(data) {
        $scope.cats = data;
    });
}

http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK,http://jobs.github.com/positions.json?callback=JSON_CALLBACK有相同的内容，但由于某种原因，只有github的一个与我的angular应用程序工作。

它为什么这样做有什么原因吗?

Answer 1

假设您正在使用静态资源文件，您需要意识到字符串'JSON_CALLBACK'是占位符，并且在每个$http.jsonp()请求中得到修改。

您应该能够在浏览器开发工具的网络选项卡中看到实际的请求URL。

您也可以在浏览器中打开github版本并更改值，以查看它在服务器上不是静态的，并将调整为发送的任何值。

如果你想使用jsonp服务器端，它需要返回callback GET参数值的动态值

Answer 2

+1 @charlietfl所说的。此外，请确保在响应头中设置Content-Type:application/javascript;charset=utf-8。