AJAX调用成功并返回数据后的更新视图
问题描述:
我是一名初学者,工作在一个食谱搜索应用程序,该应用程序根据用户在搜索栏中放入的成分返回一系列食谱。我正在学习使用Angular,因为它很方便,并且使我的代码更易于管理。AJAX调用成功并返回数据后的更新视图
到目前为止,我已经成功地向我的数据库的API发出jQuery Ajax GET请求,并返回了一个JSON对象列表。
这里是我的角度控制器声明:
var recipesData = []; // variable that will hold the returned data
angular
.module("awesomeapp")
.controller("listController", listController);
function listController() {
var vm = this;
vm.data = recipesData;
}
而且我有东西在vm.data在我看来,在其他地方显示出来。
问题是,当vm.data设置为recipesData时,它不包含任何内容,因为该页面刚刚被加载,用户没有放入任何内容,并且没有任何数据返回。
我应该怎么做才能在Ajax调用之后设置vm.data?或者它可以设置listController函数之外?
我正在寻找一个优雅的解决方案,以便它使所有事情更容易维护。谢谢:)
答
这样做的正确方法是不使用jQuery并使用Angular的$ http服务来检索数据。更正确的方法是创建自己的服务,在内部使用Angular的$ http服务来获取数据。
所以首先你要创建服务。事情是这样的:
angular
.module("awesomeapp")
.service("recipeService", recipeService);
function recipeService($http) {
return $http.get(**url**)
}
那么你的控制器看起来像这样的东西:
function listController (recipeService) {
var vm = this;
recipeService.then(response) {
vm.data = response.data
}
}
你可能有你的服务更多的事情,最终,但应该让你在正确的方向前进。我强烈建议参考John Papa的Angularjs风格指南https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md,以获取关于如何构建应用程序的指导。你想尽量避免在Angular中使用jQuery,但特别是,你想避免在Angular本身使用它。
谢谢。我猜为什么我使用jQuery的ajax的原因是因为我需要将许多参数附加到url,并且ajax以json格式保存所有格式良好的格式。用$ http做什么会是一种好的方法? –
此外,我很困惑recipeService.then(响应)如何工作。它与成功的回调函数相同吗? listController在这种情况下如何知道“响应”是什么? –
$ http是Angular等同于JQuery的ajax。您可以传递参数,它也会返回JSON等。 –