很难使用 angular 向 JSON 文件发出 post 请求

Question

有！总体而言，对于 Angular 和 Javascript 来说还是个新手，我正在尝试制作一个简单的单页玩具应用程序，您可以在其中使用 JSON 文件作为存储来添加和查看客户。我已经能够显示我的 JSON，但我一直无法使用表单添加新条目。我一直在服务器上登记，当我点击提交时，没有发出 post 请求。任何帮助将非常感激！谢谢！

这是我的表格

<div ng-controller="CustomerAddController as addCtrl">
  <form
  ng-submit="addCtrl.addCustomer()" novalidate>
    <h2>Add a new customer </h2>
    <fieldset ng-model="addCtrl.customer.name">Name: <input type="text"/></fieldset>

    <fieldset ng-model="addCtrl.customer.email">Email: <input type="email"/></fieldset>
    <fieldset ng-model="addCtrl.customer.phone">phone: <input type="text"/></fieldset>
    <h3>Address</h3>
    <fieldset ng-model="addCtrl.customer.street">Street: <input type="text"/></fieldset>
    <fieldset ng-model="addCtrl.customer.city">City: <input type="text"/></fieldset>
    <fieldset ng-model="addCtrl.customer.state">State: <input type="text"/></fieldset>
    <fieldset ng-model="addCtrl.customer.zip">Zip: <input type="text"/></fieldset>
    <input type="submit" value="Submit"/>
  </form>
</div>

这是我的 app.js 文件

'use strict';
var app = angular.module('app', [ ]);
app.controller('CustomerListController', function($scope, $http){
    $http.get('customers.json').then(function(res){
      $scope.customers = res.data;
   });
});

app.controller('CustomerAddController', function($scope, $http){
    $scope.addCustomer = function() {
     $http.post('customers.json').then(function(res){
         $scope.customers = res.data;
     })
     .success(function(data){
          console.log(data);
          if (!data.success) {
            $scope.errorName = data.errors.name;
          } else {
            $scope.message = data.message;
          }
      });

    };
});

Answer 1

你应该做的第一件事是，

将 ng-model 指令附加到 input 字段而不是 fieldset，因为它们只适用于 input 和 textarea

<form ng-submit="addCtrl.addCustomer()" novalidate>
    <h2>Add a new customer </h2>
    <fieldset>
      Name: <input type="text" ng-model="addCtrl.customer.name" />
    </fieldset>
    <fieldset>
        Email: <input type="email" ng-model="addCtrl.customer.email" />
    </fieldset>
    <fieldset>
        phone: <input type="text" ng-model="addCtrl.customer.phone" />
    </fieldset>
    <h3>Address</h3>
    <fieldset>
        Street: <input ng-model="addCtrl.customer.street" type="text" />
    </fieldset>
    <fieldset>
        City: <input ng-model="addCtrl.customer.city" type="text" />
    </fieldset>
    <fieldset>
        State: <input ng-model="addCtrl.customer.state" type="text" />
    </fieldset>
    <fieldset>
        Zip: <input ng-model="addCtrl.customer.zip" type="text" />
    </fieldset>
    <input type="submit" value="Submit" />
</form>

除此之外，您使用的是 controllerAs，因此控制器数据应绑定到 this 上下文。此外 post 调用似乎在 URL 中有 .json，这应该是实际服务器 URL，因此这些参数将与有效负载一起传递并且不要忘记传递数据post @Kyle 在下面的回答中指出的请求。

var app = angular.module('app', [ ]);

app.controller('CustomerListController', function($http){
  var self = this;
  $http.get('customers.json').then(function(res){
     self.customers = res.data;
  });
});

app.controller('CustomerAddController', function($http){
     var self = this;
     self.addCustomer = function() {
     //below serverUrl would be server where you configured post request
     //pass self.customer in that, will pass whole customer filled form
     $http.post(serverUrl, self.customer).then(function(res){
         self.customers = res.data;
     })
     .success(function(data){
          console.log(data);
          if (!data.success) {
            self.errorName = data.errors.name;
          } else {
            self.message = data.message;
          }
      });
    };
});

Answer 2

您需要使用您的 $http.post()

发送数据

$http.post("customers.json",data).then...

https://docs.angularjs.org/api/ng/service/$http

很难使用 angular 向 JSON 文件发出 post 请求

Having a hard time making a post request to a JSON file using angular

javascript

ajax

angularjs

angularjs-http

angularjs-ng-model