$http.post 在 AngularJS 中未按预期运行答案

【问题标题】：$http.post not acting as expected in AngularJS$http.post 在 AngularJS 中未按预期运行
【发布时间】：2016-01-25 20:34:53
【问题描述】：

我已经多次看到这个话题被讨论过，但是在阅读了我在这个话题上看到的每一个答案后，我仍然感到困惑。

正如我之前的许多人一样，我正在尝试创建这个具有 CRUD 功能的基本待办事项应用程序。我有以下（删节以显示相关部分）代码：

HTML：

        <div ng-repeat="item in items | orderObjectBy:sortby" ng-if="complete == 'N'">
            <strong>{{item.title}}</strong><br/>
            <em>{{item.details}}</em><br/>
            {{item.due}}<br/>
            <form>Mark Complete? <input type="checkbox" ng-model="item.complete" value="Y"></form>
            <a href="#/item/edit/{{item.id}}">Edit this item</a>
            <br/>
            <hr/>           
        </div>

    <button ng-click="save()">Save changes</button>

控制器中的JS：

    $scope.save = function() {
    $http.post('js/services/items.json', $scope.items).success(function(data) {
        $scope.msg = 'Data saved' + JSON.stringify($scope.items);
    });
};

当我选中“已完成”框，然后选中“保存更改”时，我得到了更新 JSON 的数据转储，但它从未真正更新服务器上的 JSON 文件。该路径与我最初用于获取 JSON 的确切路径相同。没有抛出任何错误。它根本不这样做。

我在这里错过了什么？

【问题讨论】：

呃，我很困惑...您希望将您的 json 数据发布到服务器会更新您的文件吗？基于什么前提？
执行 POST 请求的快捷方式是 post(url, data)。您是否为您的服务指定了正确的 URL？此服务 URL 是否期望接收 POST 请求？
我想这就是我所缺少的。根据我阅读的内容，我认为我可以使用 $http.post 并且它会更新服务器上的 JSON 文件。我现在要问的是，要让它真正发挥作用，我显然缺少什么步骤？

标签： angularjs http-post

【解决方案1】：

javascript 是一种客户端语言，无法访问服务器的文件系统，因此 Angular 本身无法更新 Web 服务器上的该文件。

要进行服务器端文件操作，您需要使用服务器端语言，例如 php 或 .net

【讨论】：

好的。我正在使用 Php，所以你说我需要实际提交表单并让 Php 操作文件？那么，$http.post() 究竟是做什么的呢？
该命令向您的 Web 服务器发出请求。由 php 来操作服务器上的文件并相应地提供对请求的响应
但是，如果我已经通过表单提交返回服务器，为什么还需要 http.post？或者，您是说 http.post 中的 URL 应该是操作 JSON 的 Php 文件？但这没有意义，因为该 Php 文件将如何获得更新的信息？在我看来，它似乎无法读取内容的第二个参数。
好的，现在我也有点困惑了。启发这个 ToDo 应用程序的是我从一家公司收到的请求。根据这里所说的，它似乎有两个相互冲突的要求：1）用户可以重新加载页面并查看更新 2）这不需要服务器组件。 :( 他们希望在客户端 100% 完成。

【解决方案2】：

Angular 服务调用服务端

(function () {
    'use strict';

    angular
        .module('app')
        .factory('service', service);

    function service($http) {
        var url = 'api/todo';

        var service = {
            update: update
        };

        return service;

        function update(id, data, callback, errorCallback) {
            if (id) {
                $http({
                    method: 'PUT',
                    url: url + '/' + id,
                    data: data
                })
                .success(function (data, status, headers, config) {
                    if (callback) {
                        callback(status);
                    }
                })
                .error(function (data, status, headers, config) {
                });
            }
        };
    }
})();

使用服务的 Angular 控制器

(function () {
    'use strict';

    angular.module('app')
           .controller('controller', controller);

    function controller($scope, service) {

        $scope.save = function () {
            var person = {
                Id: $scope.item.id,
                Name: $scope.item.name
            };

            service.update(personId, person, function (status) {
                $scope.msg = 'Data saved';
            });
        };
    }
})();

如果您使用 .NET 基础架构，您的服务可能如下所示。

namespace App.Controllers.Api
{
    [Route("api/[controller]")]
    public class TodoController : Controller
    {
        [FromServices]
        public ITodoRepository Repository { get; set; }

        [HttpPut("{id}")]
        public IActionResult Update(int id, [FromBodyModels.TodoModel data)
        {
            if (data == null || data.Id != id)
            {
                return this.HttpBadRequest();
            }

            this.Repository.Update(data);

            return new NoContentResult();
        }
    }
}

*对于更新方法，您需要使用 PUT 方法而不是 POST

更多关于 ASP.NET 5（ASP.NET 的下一个版本）的信息可以参考http://docs.asp.net/en/latest/tutorials/your-first-aspnet-application.html

【讨论】：