在angularjs中发送带有数据的ajax请求

Question

我有如下表格。在这里，我获取了每个元素的值并通过 ajax 调用将其发送到服务器。他们是否有任何简单的方法可以使用表单中的所有值向服务器发送请求？我是新手请帮忙。我的表单有很多元素很难获取所有元素的值，他们有什么替代方法吗？

<div ng-app="Myapp">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
    <script>
        var Myapp = angular.module('Myapp', ["ngRoute"]);
    </script>

    <div ng-controller="orderFormController">
        Item1<input type="text" name="item1"  ng-model='item1'><p></p>
        Item2 <input type="text" name="item2"  ng-model='item2'><p></p>
        Item3 <input type="text" name="item3"  ng-model='item3'><p></p>
         Item4 <input type="text" name="item4"  ng-model='item4'><p></p>
        Item5 <input type="text" name="item5"  ng-model='item5'><p></p>
        <button type="button"  ng-click='saveAll()' >SAVE ORDER</button>
    </div>    
    <script>
        Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {

                 var data = {};
                $scope.saveAll = function () {
                    data = {'item1': $scope.item1,'item2': $scope.item2,'item3': $scope.item3,'item4': $scope.item4}
                    $http.post("order/save/", data
                        ).success(function (res, status, headers, config) {
                    if (res == 'success')
                    {
                        $scope.message = res;
                    }
                    else
                    {
                        $scope.message = res;
                    }
                }).error(function (res, status) { 
                    $scope.message = res;
                });
                }

            }]);

    </script>               

Answer 1

正确的方法是将模型发送到服务器，使用$resource（用于 REST）

<div ng-controller="orderFormController">
    Item1
    <input type="text" name="item1" ng-model='item.item1'><p></p>
    Item2 
    <input type="text" name="item2" ng-model='item.item2'><p></p>
    Item3 
    <input type="text" name="item3" ng-model='item.item3'><p></p>
    Item4 
    <input type="text" name="item4" ng-model='item.item4'><p></p>
    Item5 
    <input type="text" name="item5" ng-model='item.item5'><p></p>

    <button type="button"  ng-click='saveAll()' >SAVE ORDER</button>
</div>  

$scope.item.$save(function(data) {

});

$item 是一个 angularjs 资源

Answer 2

在作用域上放置一个父对象并将你的属性连接到它。父对象就是您发送的对象。

<div ng-app="Myapp">
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
    <script>
        var Myapp = angular.module('Myapp', ["ngRoute"]);
    </script>

    <div ng-controller="orderFormController">
        Item1<input type="text" name="item1"  ng-model='data.item1'><p></p>
        Item2 <input type="text" name="item2"  ng-model='data.item2'><p></p>
        Item3 <input type="text" name="item3"  ng-model='data.item3'><p></p>
         Item4 <input type="text" name="item4"  ng-model='data.item4'><p></p>
        Item5 <input type="text" name="item5"  ng-model='data.item5'><p></p>
        <button type="button"  ng-click='saveAll()' >SAVE ORDER</button>
    </div>    
    <script>
        Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {

                 var data = {};
                $scope.data = data;
                $scope.saveAll = function () {
                    $http.post("order/save/", data
                        ).success(function (res, status, headers, config) {
                    if (res == 'success')
                    {
                        $scope.message = res;
                    }
                    else
                    {
                        $scope.message = res;
                    }
                }).error(function (res, status) { 
                    $scope.message = res;
                });
                }