发送POST请求并获取Angular中的项目

时间:2016-05-22 14:46:43

标签: javascript angularjs

我正在使用Angular编写我的第一个应用程序,现在遇到了问题...我有带有身份验证令牌的POST请求的地址。类似的东西:

http://example.com/orders?authentication_token=123456

所以我需要发送ng-submitng-click发送该请求并获取大量项目并在页面上显示... 另外,我有一个body

{
"order": {
    "seller_id":84,
    "price":123,
    "delivary_date":"12-12-2025",
    }
}

那么,最好的方法是什么?

2 个答案:

答案 0 :(得分:1)

假设您有orderCtrlng-clickng-submit取决于您的应用需求。调用触发someFunction()帖子的函数$http,您可以处理成功和失败响应。

app.controller('orderCtrl', function($scope, $http) {

  $scope.someFunction = function(){
  var data = {}; // prepare your data here. 
  $http({
    method : "POST",
    url : "specify your url here",
    data : data
  }).then(function mySucces(response) {
      var response = response.data;
       // handle your success here
    }, function myError(response) {
      // handle the failure here
  });

 });
});

注意:

如果您正在使用表单,并且希望在用户填写所有信息后触发此功能,请使用ng-submit。如果它是独立的,请使用ng-click

我再说一遍,这完全取决于你在做什么。

答案 1 :(得分:1)

因此,您必须制作一个与服务器通信并获取数据的角度服务和一个角度控制器,它将与服务交互以获取数据并在UI上显示。

假设服务名称是MyService:

app.service('MyService', function($http) {
    var params = {}; // some parameters
    this.getData = function(successCallback, failureCallback) {
        $http.post("URL", params).then(function(data) {
            successCallback(data);
        }, function(data, status) {
            failureCallback(data, status);
        });
    }
});

控制器名称为MyCntrl:

app.controller('MyCntrl', function($scope, MyService) {

    function successCallback(data) {
        $scope.itemList = data;  
    }

    function failureCallback(data, status) {
        $scope.itemList = {};
    }

    $scope.handleClick = function() {
        MyService.getData(successCallback, failureCallback);
    }
});

我相信它可以帮助您解决您的要求!!!