使用AngularJS和PHP以及JSON文件存储的简单CRUD_Php_Angularjs_Json_Crud

使用AngularJS和PHP以及JSON文件存储的简单CRUD

php angularjs json

使用AngularJS和PHP以及JSON文件存储的简单CRUD,php,angularjs,json,crud,Php,Angularjs,Json,Crud,在否决投票之前（我想使用JSON文件而不是数据库实现CRUD）我正在Angular JS中使用下面的代码将表单数据发送到PHP，我想从PHP修改我的本地JSON文件我面临以下问题表单值在JSON文件中变为Null 我想在用户每次单击register按钮时附加数组 <!DOCTYPE html> <html lang="en"> <head> <script src="http://ajax.googleapis.com/

在否决投票之前（我想使用JSON文件而不是数据库实现CRUD）

我正在Angular JS中使用下面的代码将表单数据发送到PHP，我想从PHP修改我的本地JSON文件

我面临以下问题

表单值在JSON文件中变为Null

我想在用户每次单击register按钮时附加数组

 <!DOCTYPE html>
    <html lang="en">
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
     <div ng-controller="myCtrl">
      <form>
       <h2>Register Form</h2>
       <div>
       <label>First Name</label>
       <input type="text" ng-model="firstname" placeholder="First Name"  required="required">
       </div>
    <div>
      <label>Last Name</label>
      <input type="text" ng-model="lastname" placeholder="Last Name" required="required">
    </div>
    <button ng-click='Register()'>Register</button>
    </form>
    <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr ng-repeat="data in usersData">
      <td>{{data.firstname}}</td>
      <td>{{data.lastname}}</td>
    </tr>
  </table>
</div>
<script type="text/javascript">

  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope, $http) {

    $scope.Register = function () {
      $http.post("misc.php", {
        'firstname': $scope.firstname,
        'lastname': $scope.lastname
      }).success(function (response) {
        $scope.usersData = response.users;
      });
    };
  });
</script>

 </body>
</html>

我可以回答您的第二个问题，即每次用户单击register按钮时，我都要附加数组

 <!DOCTYPE html>
    <html lang="en">
    <head>
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
     <div ng-controller="myCtrl">
      <form>
       <h2>Register Form</h2>
       <div>
       <label>First Name</label>
       <input type="text" ng-model="firstname" placeholder="First Name"  required="required">
       </div>
    <div>
      <label>Last Name</label>
      <input type="text" ng-model="lastname" placeholder="Last Name" required="required">
    </div>
    <button ng-click='Register()'>Register</button>
    </form>
    <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
    <tr ng-repeat="data in usersData">
      <td>{{data.firstname}}</td>
      <td>{{data.lastname}}</td>
    </tr>
  </table>
</div>
<script type="text/javascript">

  var app = angular.module('myApp', []);
  app.controller('myCtrl', function ($scope, $http) {

    $scope.Register = function () {
      $http.post("misc.php", {
        'firstname': $scope.firstname,
        'lastname': $scope.lastname
      }).success(function (response) {
        $scope.usersData = response.users;
      });
    };
  });
</script>

 </body>
</html>

有一个名为$scope.usernames的本地数组，当您在成功函数中进行$http.post调用时，将其附加到$scope.usernames数组中。请参阅下面的代码

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
  $scope.usernames=[];
  $scope.Register = function () {
    $http.post("misc.php", {
     'firstname': $scope.firstname,
     'lastname': $scope.lastname
    }).success(function (response) {
        $scope.usernames.push({"firstname":$scope.firstname,"lastname":$scope.lastname});    
        $scope.usersData = response.users;
    });
  };
});

我很久以前就使用过PHP，所以找不到关于第一个错误的信息，首先确保它在angular中工作，然后进行post调用

$user未设置，angular传递原始数据，因此需要使用

file\u get\u contents（'php://input）

而不是POST，或者更改提交的表单数据。您还需要设置开发环境以显示所有错误。最后，您的预期输出与从

$json[$user]=array（…

）获得的结果不匹配，它将为您提供一个json文件，其中包含

{“whatever$user”：[“first”：“jim”，“last”：“leirvik”]}

。请确保立即检查此项！！如果它工作正常，请确保此答案正确。谢谢

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
  $scope.usernames=[];
  $scope.Register = function () {
    $http.post("misc.php", {
     'firstname': $scope.firstname,
     'lastname': $scope.lastname
    }).success(function (response) {
        $scope.usernames.push({"firstname":$scope.firstname,"lastname":$scope.lastname});    
        $scope.usersData = response.users;
    });
  };
});