使用JSONP方法在AngularJS $ http服务 [英] Using JSONP method for $http service in AngularJS

问题描述

我是一个相对的新手到AngularJS，并已经成功使用的$ HTTP GET方法为基本验证的概念应用程序，我现在正在尝试使用JSONP方法从远程URL拉一些JSON我一直在考虑。我已经在这里创造一个基本的plunker显示我想要做的事： HTTP： //plnkr.co/edit/Joud0ukAzhgvNM0h9KjB?p=$p$pview

I'm a relative newbie to AngularJS, and having successfully used the GET method of $http for a basic proof-of-concept app, I'm now trying to use the JSONP method to pull some JSON from a remote URL I've been given. I've created a basic plunker here to show what I'm trying to do: http://plnkr.co/edit/Joud0ukAzhgvNM0h9KjB?p=preview

我用我的控制器像这里面的HTTP请求：

I'm using an HTTP request inside my controller like this:

    $http({method: 'jsonp', url: 'http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=JSON_CALLBACK'}).
  success(function(data) {
    $scope.countries = data;
    console.log('success');
  }).
  error(function(data) {
    console.log('error');
  });    

...但我得到任何回报在所有（除在控制台'错误'）。我知道URL是否返回有效JSON（<一个href=\"http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0\" rel=\"nofollow\">http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0 ），但我只是没有得到任何东西...

...but I'm getting nothing back at all (except 'error' in the console). I know the URL is returning valid JSON ( http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0 ), but I'm just not getting anything back...

推荐答案

JSONP 需要你来包装你的JSON响应成一个JavaScript函数调用。
当你做一个JSONP请求的查询字符串将设置一个名为'回调'，会告诉你的服务器如何包装JSON响应。参数

JSONP requires you to wrap your JSON response into a Javascript function call. When you do a JSONP the request query string will set a parameter called 'callback' that will tell your server how to wrap the JSON response.

所以反应应该是这样的：

So the response should be something like:

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

角将取决于它是多少请求等待响应定义回调参数作为angular.callbacks._0，angular.callbacks._1，angular.callbacks._2 ......，所以，如果你做单请求的响应应该是

Angular will define the callback parameter as angular.callbacks._0, angular.callbacks._1, angular.callbacks._2 … depending on how many requests it is waiting for response, so if you do a single request the response should be:

angular.callbacks._0([
    {"id": "1", "name": "Lorem ipsum"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

服务器应该使用回调参数从请求字符串来设置相应的响应。

The server should use the callback parameter from the request string to set the response accordingly.

检查您的 Plunker 的网络活动，您将看到该请求设置回调参数，但你所得到的反应不被包裹它。

Check your Plunker's network activity and you will see that the request is setting the callback parameter but the response you are getting is not being wrapped with it.

这篇关于使用JSONP方法在AngularJS $ http服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！