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函数之外？

我正在寻找一个优雅的解决方案，以便它使所有事情更容易维护。谢谢:)

来源

2017-07-06 Jiabei Luo

这样做的正确方法是不使用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本身使用它。

来源

2017-07-06 21:02:14

谢谢。我猜为什么我使用jQuery的ajax的原因是因为我需要将许多参数附加到url，并且ajax以json格式保存所有格式良好的格式。用$ http做什么会是一种好的方法？ –

此外，我很困惑recipeService.then（响应）如何工作。它与成功的回调函数相同吗？ listController在这种情况下如何知道“响应”是什么？ –

$ http是Angular等同于JQuery的ajax。您可以传递参数，它也会返回JSON等。 –

AJAX调用成功并返回数据后的更新视图

回答

相关问题