gpt4 book ai didi

php - 使用 Angular 和 php 插入、显示和删除数据

转载 作者:行者123 更新时间:2023-11-29 10:44:43 24 4
gpt4 key购买 nike

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

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”作为数据库名称获取.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 - 与教程相同

感谢帮助

最佳答案

检查拼写错误:

<input type="text" ng-model="newTesting">


data: {newName: $scope.newName, newPhone: $scope.newPhone, newTest: $scope.newTest }

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

关于php - 使用 Angular 和 php 插入、显示和删除数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44825865/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com