AngularJS中的多个JSONP XHR请求失败

Question

我有一个网络应用程序，可以向不同的Web服务发出多个XHR请求。我在调用Federal Register API时遇到问题。从文档here建议：

  

也可以使用简单的JSONP接口;只需添加callback=foo   CGI参数到任何URL的末尾，以便为结果做好准备   跨域JavaScript消费

基于Angular docs我需要使用&callback=JSON_CALLBACK。

我已经按照与此视图中其他jsonp调用完全相同的方式设置此请求，但联邦注册调用返回错误Unexpected token :。 JSON即将发布，它包含在由Angular定义的函数中：articles.json?angular.callbacks._4，这正是我所期望的。也许我犯了一个简单的错误，但据我所知，这就像我的其他XHR请求一样。

从控制台：

我的服务：

angular.module('atRiskApp.services')

.factory('FederalRegister', [ '$http', function ($http) {
    var searchRegisterByName = function ( sciName ) {
        var url = 'http://www.federalregister.gov/api/v1/articles.json?per_page=20&order=newest&conditions%5Bterm%5D=' + sciName + '&callback=JSON_CALLBACK';
        var promise = $http.jsonp( url );
        return promise;
    };

    return {
        searchRegisterByName: searchRegisterByName
    }
}]);

控制器：

FederalRegister.searchRegisterByName($scope.codes.sciName).then(function (response) {
  $scope.registerDocs = response.data;
});

修改 这是URL for a sample API call。数据正确包装在JSON_CALLBACK（）中;怎么了？

编辑2： API有一个form for constructing API calls。我发现API返回的内容类型为application/json而不是application/javascript会导致问题吗？

Answer 1

我意识到我添加到URL的组件没有被编码。这导致API调用中包含一个空格。无论出于何种原因，API调用成功返回JSONP，但我仍然收到错误。

我在服务中切换了URL，以便在进行api调用之前对科学名称进行编码：

angular.module('atRiskApp.services')

.factory('FederalRegister', [ '$http', function ($http) {
    var searchRegisterByName = function ( sciName ) {
        var url = 'http://www.federalregister.gov/api/v1/articles.json?per_page=20&order=newest&conditions%5Bterm%5D=' + encodeURIComponent(sciName) + '&callback=JSON_CALLBACK';
        return $http.jsonp( url );
    };

    return {
        searchRegisterByName: searchRegisterByName
    }
}]);

网址声明中的密钥位为encodeURIComponent(sciName)。