使用AngularJS进行简单的AJAX调用
[英]Making a simple AJAX call with AngularJS
问题描述
I am very new to Angular JS and just trying to learn the basics. 
我是Angular JS的新手，只是想学习基础知识。 I think I am having an issue with assigning the JSONObject to $scope.talks. 我认为将JSONObject分配给$ scope.talks时遇到问题。 The table does now show any values. 该表现在显示任何值。
Here I make a call to retrieve the JSONObject: 在这里，我进行了调用以检索JSONObject：
<script type = "text/javascript">
var myApp = angular.module('myApp',[]);
myApp.factory("EventsService", function ($http, $q) {
return {
getTalks: function () {
// Get the deferred object
var deferred = $q.defer();
// Initiates the AJAX call
$http({ method: 'GET', url: 'http://localhost:8080/greeting'
}).success(deferred.resolve).error(deferred.reject);
// Returns the promise - Contains result once request completes
return deferred.promise;
}
}
});
myApp.controller("HelloWorldCtrl", function ($scope, EventsService)
{
EventsService.getTalks().then(function (talks) {
$scope.talks = talks.data
}, function ()
{ alert('error while fetching talks from server') })
});
</script>
The JSONObject returned by the call is the following: 调用返回的JSONObject如下：
{"talks":[{"duration":"45","venue":"5","speaker":"bill gates","name":"test","id":"45"},{"duration":"45","venue":"2","speaker":"bill gates","name":"another test","id":"33"}]}
And here is the code to render the data: 这是呈现数据的代码：
<body ng-app="myApp" ng-controller = "HelloWorldCtrl" style="font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif">
<table class ="table table-condensed table-hover">
<tr>
<th>Id</th>
<th>Name</th>
<th>Speaker</th>
<th>Venue</th>
<th>Duration</th>
</tr>
<tr ng-repeat = "talk in talks">
<td>{{talk.id}}</td>
<td>{{talk.name}}</td>
<td>{{talk.speaker}}</td>
<td>{{talk.venue}}</td>
<td>{{talk.duration}}</td>
</tr>
</table>
</body>
2 个解决方案
解决方案1
1 已采纳 2016-12-14 16:49:06
There is no talks.data property in your response object. 您的响应对象中没有talks.data属性。
{"talks":[{"duration":"45","venue":"5","speaker":"bill gates","name":"test","id":"45"},{"duration":"45","venue":"2","speaker":"bill gates","name":"another test","id":"33"}]}
You should assign the scope variable as 您应该将范围变量分配为
$scope.talks = talks.talks
The controller will look like 控制器看起来像
myApp.controller("HelloWorldCtrl", function ($scope, EventsService)
{
EventsService.getTalks().then(function (talks) {
$scope.talks = talks.talks
}, function ()
{ alert('error while fetching talks from server') })
});
解决方案2
0 2016-12-14 16:52:44
getTalks function must be something like: getTalks函数必须类似于：
getTalks: function () {
return $http.get('http://localhost:8080/greeting');
}
The Angular method $http will return a promise. Angular方法$http将返回一个promise。 In your code, you are returning a promise inside another promise. 在您的代码中，您将在另一个promise中返回一个promise。 My code fix that and make it cleaner. 我的代码对此进行了修复，使其更加整洁。
Then, in your controller, put: 然后，在您的控制器中输入：
myApp.controller("HelloWorldCtrl", function ($scope, EventsService) {
$scope.talks = EventsService.getTalks().then(
function(res) {
return res.data;
},
function(err) {
console.log("An error has ocurred!", err);
}
)
});
Using then() you're resolving the promise. 使用then()可以解决承诺。 Is a good practice to use the JavaScript console instead of alerts or prints in your code. 使用JavaScript控制台代替代码中的警报或打印是一种好习惯。
Good luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.