AngularJS $http.post 成功但不保存数据答案

【问题标题】：AngularJS $http.post succeeds but doesn't save the dataAngularJS $http.post 成功但不保存数据
【发布时间】：2016-07-12 16:39:10
【问题描述】：

我正在尝试将数组保存到位于网络服务器上的 JSON 文件中。响应成功，但是当我打开 JSON 时，它完全是空的。

我尝试手动创建自己的 JSON 对象，但结果相同。

流程如下：

app.controller('BookController', ['$window', '$http', function ($window, $http) {
this.contacts = [];

this.exportContacts = function(contacts){
    $http({
        method: "POST",
        url: '/data/contacts.json',
        headers: { 'Content-Type': 'application/json' },
        data: contacts
    }).then(function goodCall(){
        $window.alert("Save done!");
    }, function badCall(){
        $window.alert("Failed to save error! error: " + $http.status);
    });
};
}]);

我通过表单用输入填充数组：

<form name="addCont" ng-show="showForm" ng-controller="ContactController as contactCtrl" ng-submit="contactCtrl.addContact(addCont, bookCtrl.contacts)" novalidate>
<label>
    First Name:
    <input name="fname" type="text" required ng-pattern="/^(\D)+$/" ng-model="contactCtrl.contact.firstName"></input>
    <span style="color:red" ng-show="addCont.fname.$dirty && addCont.fname.$invalid">
        <span ng-show="addCont.fname.$error.required">First Name is required.</span>
        <span ng-show="addCont.fname.$error.pattern">First name must contain letters only!</span>
    </span>
</label>
<label>
    Last Name:
    <input name="lname" type="text" ng-pattern="/^(\D)+$/" ng-model="contactCtrl.contact.lastName"></input>
    <span style="color:red" ng-show="addCont.lname.$dirty && addCont.lname.$invalid">
        <span ng-show="addCont.lname.$error.pattern">Last name must contain letters only!</span>
    </span>
</label>
<label>
    Phone Number:
    <input name="phone" type="tel" required ng-model="contactCtrl.contact.phone" ng-minlength="9" ng-maxlength="10" ng-pattern="/^(\d)+$/"></input>
    <span style="color:red" ng-show="addCont.phone.$dirty && addCont.phone.$invalid">
        <span ng-show="addCont.phone.$error.minlength">Phone number is too short!</span>
        <span ng-show="addCont.phone.$error.maxlength">Phone number is too long!</span>
        <span ng-show="addCont.phone.$error.required">Phone number is required!</span>
        <span ng-show="addCont.phone.$error.pattern">Must not contain letters!</span>
    </span>
</label>
<label>
    Notes:
    <input name="notes" type="text" ng-model="contactCtrl.contact.notes"></input>
</label>
<input type="submit" value="Submit" ng-disabled="addCont.fname.$invalid || addCont.lname.$invalid || addCont.phone.$invalid" />
</form>

所以数组应该是这样的：

[{
    firstName: "Tim",
    lastName: "asdxc",
    notes: "asdasd",
    phone: "0532753940"
},{
    firstName: "Timz",
    lastName: "asdasd",
    notes: "asdasd",
    phone: "123123123"
}]

我是否需要在发送之前解析数组？

【问题讨论】：

我认为您提供给 $http 的网址是一项网络服务。它不适用于文件
看看stackoverflow.com/questions/17547227/…

标签： javascript arrays angularjs json

【解决方案1】：

据我了解您的代码，您错过了重要的和平。您的服务器上需要一些类似 RESTful 的服务。否则您将无法保存/写入服务器上的文件。

我建议你先熟悉node，一开始可能是express。

【讨论】：

【解决方案2】：

您提供给 $http 的 url 应该是一个网络服务。它不适用于文件。

你必须创建一个在服务器端创建文件的 web 服务（php / node.js / java ...）并从 $http 调用它

【讨论】：

【解决方案3】：

我认为 url 属性必须是 'api/contacts'：假设你必须有一个 web 服务或 web api 控制器：ContactsController

$http({ method: "POST", url: 'api/contacts', headers: { 'Content-Type': 'application/json' }, data: contacts }).then(function goodCall(){ $window.alert("Save done!"); }, function badCall(){ $window.alert("Failed to save error! error: " + $http.status); });

【讨论】：