AngularJS中的AJAX调用post方法答案

【问题标题】：AJAX call post method in AngularJSAngularJS中的AJAX调用post方法
【发布时间】：2016-04-23 12:32:17
【问题描述】：

我是 AngularJS 的新手，这是我的 controller.js 文件的一部分，我让登录控制器与这个相同的服务一起工作。

我现在想要实现的是使用与我的服务不同的方法从 AJAX 调用中获取数据，然后像这样将其传递给我的 HTML。

这样做的正确方法是什么？这是我尝试过的，我根据我之前的 Chrome Packaged App 项目编写了这段代码。不同之处在于，在我的第一个项目中，我有一个 javascript 文件来更改我的 HTML 中的显示，这一次，我通过控制器、服务和应用程序来操作它。

.controller('VFCtrl', function($scope, $stateParams, $http, $ionicLoading, $state, $sce) {
        $ionicLoading.show({
            template: 'Loading...',
            duration: 1000
        });

        $http.post('myService/mysite.aspx',{action: 'someMethodFromService', ParameterFromMethod: 'someValue'})
              .success(function (response) 
              {
                  var htmldata='';
                  for(i=0;i<response.length;i++)
                  {
                      var htmlInfo = '<li><div class=\'col\'><a href="'+ response[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+response[i].Image + '" class=\'profile-img\' /><h3>' +response[i].Name+'</h3><p>'+response[i].Title+'</p></a></div></li>';

                      htmldata+= htmlInfo;
                  }
                    $("#vflist").html(htmldata);
              })
       //I don't wanna change how to submit data in my html in the success part
       //But if it MUST be change then I will.
              .error(function(data, status, headers){
                 console.log(status);
              });

    })

【问题讨论】：

如果你使用 Angular，你应该能够通过绑定做你正在尝试的事情，而无需使用 jQuery 注入 html。如果您想在页面之间共享数据，您可以通过服务来实现。每个服务都是一个单例，因此如果您将数据保存到服务中的一个对象并将该服务注入到其他地方，您将可以在那里访问该数据。
嗯，我得到了我将使用服务在页面之间共享数据的部分，因为这就是我正在做的事情，但是使用 jQuery 不是不好的做法，为什么其他所有事情都是由角度js？
这就是我所说的使用绑定而不是注入 html。您可以使用 ng-repeat 和绑定来创建 li 标记及其上的属性。根本不需要 jQuery。
但如果它是动态的呢？
数据的形状还是返回了多少项？

标签： javascript angularjs ajax

【解决方案1】：

您可以设置 ng-repeat 并绑定数组中对象的成员。虽然这不是基于您的代码，但这是一个非常简单的示例，说明了如何完成此操作：http://codepen.io/anon/pen/LNBrbG?editors=1010。

基本上，您放置ng-repeat 的元素将成为重复的模板。因此，如果您在带有 ng-repeat 的元素内嵌套 10 个元素，则会重复相同的结构。它会为您绑定到它的多个项目重复。有关工作示例，请参见代码笔。

<ul>
    <li ng-repeat="item in vm.items"><span style="color:red">{{ item.name }}</span></li>
<ul>

【讨论】：

【解决方案2】：

这里根本不需要 jQuery，Angular 就足够了。此外，在 Angular 控制器中操作 DOM 也不是一个好习惯。

考虑像下面的工作示例一样更改您的代码（当然，JSON 结构与您要求的不同）：

var app = angular.module("sa", [])
app.controller('VFCtrl', function($scope, $http) {

  $http.get('http://jsonplaceholder.typicode.com/posts', {
      action: 'someMethodFromService',
      ParameterFromMethod: 'someValue'
    })
    .success(function(data) {
      $scope.posts = data;
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="VFCtrl">
  <ul id="vflist">
    <li ng-repeat="post in posts">
      <a href="{{post.id}}">{{post.title}}</a>
  </ul>
</div>

【讨论】：