AngularJS$http.post成功,但没有't保存数据

AngularJS $http.post succeeds but doesn't save the data

本文关键字:数据 保存 http post 成功 AngularJS      更新时间:2023-09-26

我正试图将数组保存到位于Web服务器上的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"
}]

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

就我对您的代码的理解而言,您错过了一个重要的平静。您的服务器上需要一些类似RESTful的服务。否则,您将无法保存/写入服务器上的文件。

我建议你熟悉node,一开始可能会很快。

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

您必须创建一个Web服务,该Web服务在服务器端创建文件(php/node.js/java…),并从$http

调用它

我认为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); });