Question

我是Angular的新手，我正在尝试关注angular和php（http://phpenthusiast.com/blog/ajax-with-angular-and-php）的教程。我已经设法做了教程，现在我正在尝试添加一个新的字段（测试）。我在数据库中添加了一个新字段。由于某种原因，这个新的输入字段不起作用，我想知道为什么。它显示第三个输入字段，但是当我尝试添加具有第三个值的人时，它在数据库中作为null插入。这是我的代码。

的index.html

<!doctype html>
<html ng-app="ajaxExample">
<head lang="en">
    <meta charset="utf-8">
    <title>Angular Ajax with PHP</title>
</head>
<body>

<h2>The form</h2>

<div ng-controller="mainController">

    <form> 
        <p>Fill the form</p>
        <div>
            <label>Name</label>
            <input type="text" ng-model="newName">
        </div>

        <div>
            <label>Phone</label>
            <input type="text" ng-model="newPhone">
        </div>

        <div>
            <label>Tests</label>
            <input type="text" ng-model="newTesting">
        </div>

        <input type="button" value="Add" ng-click="addPerson()">

    </form>

    <h2>The list</h2>
    <p>The names that were added with the form.</p>

    <ul>
        <li ng-repeat="person in people">
            <button ng-click="deletePerson( person.id )">Delete</button> {{ person.name }} {{ person.phone }} {{ person.testing }}
        </li>
    </ul>

</div>

<script src="/libs/angular.min.js"></script>
<script src="/assets/js/app.js"></script>

</body>
</html>

app.js

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

ajaxExample.controller('mainController',function($scope,$http){
    $scope.people;

    $scope.getPeople = function() {
          $http({

              method: 'GET',
              url: '/api/get.php'

          }).then(function (response) {

              // on success
              $scope.people = response.data;

          }, function (response) {

              // on error
              console.log(response.data,response.status);

          });
    };

    $scope.addPerson = function() {
          $http({

               method: 'POST',
               url:  '/api/post.php',
               data: {newName: $scope.newName, newPhone: $scope.newPhone, newTest: $scope.newTest }

          }).then(function (response) {// on success

               $scope.getPeople();

          }, function (response) {

               console.log(response.data,response.status);

          });
    };

    $scope.deletePerson = function( id ) {

          $http({

              method: 'POST',
              url:  '/api/delete.php',
              data: { recordId : id }

          }).then(function (response) {

              $scope.getPeople();

          }, function (response) {

              console.log(response.data,response.status);

          });
        };

        $scope.getPeople();
});

数据库

CREATE TABLE IF NOT EXISTS `people` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `testing` INT(5),
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

connect.php - 类似于教程中的'test'作为数据库名称 get.php

<?php
require 'connect.php';

$connect = connect();

// Get the data
$people = array();
$sql = "SELECT id, name, phone, testing FROM people";

if($result = mysqli_query($connect,$sql))
{
    $count = mysqli_num_rows($result);

    $cr = 0;
    while($row = mysqli_fetch_assoc($result))
    {
        $people[$cr]['id']    = $row['id'];
        $people[$cr]['name']  = $row['name'];
        $people[$cr]['phone'] = $row['phone'];
        $people[$cr]['testing'] = $row['testing'];

        $cr++;
    }
}

$json = json_encode($people);
echo $json;
exit;

post.php中

<?php
require 'connect.php';

$connect = connect();

// Add the new data to the database.
$postdata = file_get_contents("php://input");
var_dump($postdata);
if(isset($postdata) && !empty($postdata))
{
    $request     = json_decode($postdata);

    $newName  = preg_replace('/[^a-zA-Z ]/','',$request->newName);
    $newPhone = preg_replace('/[^0-9 ]/','',$request->newPhone);
    $newTesting = preg_replace('/[^0-9 ]/','',$request->newTesting);

    if($newName  == '' || $newPhone == '') return;

    $sql = "INSERT INTO `people`(`name`, `phone`, `testing`) VALUES ('$newName','$newPhone', '$newTesting')";

    mysqli_query($connect,$sql);
}
exit;

delete.php - 与教程

相同

感谢您的帮助

Answer 1

检查拼写错误：

模型和范围应具有相同的名称

使用angular和php插入，显示和删除数据

1 个答案: