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

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

本文关键字：post 请求 文件 JSON angular 很难      更新时间：2023-09-26

那里！对于Angular和Javascript来说，我是个新手，我正在尝试制作一个简单的一页玩具应用程序，在那里你可以使用JSON文件作为存储添加和查看客户。我已经能够显示我的JSON，但我一直在使用表单添加新条目。我一直在服务器上登录，当我点击提交时，不会发出发布请求。任何帮助都将不胜感激！谢谢

这是我的表格

<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;
          }
      });
    };
});

你应该做的第一件事是，

将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，所以这些参数将与payload&正如@Kyle在下面的回答中指出的那样，不要忘记在post请求中传递数据。

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;
          }
      });
    };
});

您需要使用$http.post（）发送数据

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

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

相关文章：