我试图通过$http从Angular JS中的外部源获取数据,但它返回空白数据。当用于从本地文件获取数据时,相同的服务可以完美地工作。
用于从本地源获取数据的代码:
controllers.controller('listController', ['$scope', '$http',
function($scope,$http) {
var data = null;
$http.get('js/test.json').success(function(data) {
$scope.markers = data.hooks;
});
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 2
};
}]);
用于从外部源获取数据的代码:
controllers.controller('listController', ['$scope', '$http',
function($scope,$http) {
var data = null;
$http.get('http://115.113.151.200:8081/user/maphook/mobile/generate_list.jsp').success(function(data) {
$scope.markers = data.hooks;
});
$scope.map = {
center: {
latitude: 45,
longitude: -73
},
zoom: 2
};
}]);
如您所见,只有 url 发生了变化,在后一种情况下,Firebug 碰巧在控制台中显示以下内容:图像
我不确定出了什么问题。我使用 json 数据在谷歌地图上绘制点。test.json完美地工作。我假设可能是不允许外部数据源(域与当前域不同),或者 Angular 甚至在从外部源返回数据之前就继续渲染谷歌地图。
问题是外部服务器不允许您请求数据。有一个完整的标准来塑造这一点。
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
http://enable-cors.org/
如果您打算使用 ajax 跨域发送和接收 json 数据,您应该阅读 JSONP。它支持角度.js,你只需要找到一个例子(谷歌有负载)。
Jsonp是你所需要的。