10

我可能在这里遗漏了一些东西，但我无法使这个 JSONP 请求工作，这里是代码：

var url =  'http://' + server + '?callback=JSON_CALLBACK';
$http.jsonp(url)
    .success(function(data){
       console.log('success');
    })
    .error(function () {
      console.log('error')
    });

请求触发正常，我收到以下格式的响应（带有标头 Content-Type:application/json）：

    [{"id": "1", "name": "John Doe"},
     {"id": "2", "name": "Lorem ipsum"},
     {"id": "3", "name": "Lorem ipsum"}]

你能看出有什么不对吗？也许我应该从服务器返回的格式不正确？除了我设置的错误消息（'error'）之外，Angular 触发错误回调没有任何错误消息。

4

3 回答 3

30

@TheHippo 是正确的，数据不应该只是简单的 json 响应。这是针对 AngularJS 中的 youtube 端点的 JSONP 请求的工作示例。

在这个例子中有几点需要注意：

  • Angular 的$http.jsonp将请求查询字符串参数从 转换callback=JSON_CALLBACK为callback=angular.callbacks._0.
  • alt=json-in-script在调用 youtube 端点时，我需要通过使用而不是在查询字符串中向服务指定这是一个 JSONP 请求alt=json。这可以在他们的文档中找到。
  • 将此 url的结果与此结果进行比较，以查看浏览器中 JSON 和 JSONP 响应之间的区别。
  • 查看开发者工具中的 Chrome 网络面板，以帮助比较您的请求/响应并进行故障排除。

我知道这个例子非常具体，但希望它有所帮助！

于 2013-05-03T06:13:31.070 回答
16

JSONP要求您将数据包装到 JavaScript 函数调用中。因此，从技术上讲，您返回的是 JavaScript 文件而不是 Json 文件。

从服务器返回的数据应该类似于：

// the name should match the one you add to the url
JSON_CALLBACK([
    {"id": "1", "name": "John Doe"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

编辑：如果其他人偶然发现 Angular 的 JSONP 问题，请同时阅读这个问题的答案，它包含有关 Angular 如何处理实际回调函数的有用信息。

于 2013-05-02T23:46:57.357 回答
-3

如果响应数据是“纯”JSON，我们可以使用 Angular 的 $http.get 来处理它。

$http.get(url).
  then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.responseArray = response.data;
 }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
 });

请参阅w3schools上的示例

于 2015-09-01T08:32:47.480 回答