使用AngularJs在mySql数据库中插入数据

时间:2016-11-19 15:20:47

标签: php mysql angularjs ionic-framework

我正在尝试使用带有PHP / MySQL的AngularJs在mysql数据库服务器中插入一些数据。但是它没有工作。没有显示。为什么它不起作用?我的代码 -

的index.html

<!DOCTYPE html>
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">    </script>

</head>

<body ng-app="myApp" ng-controller="empcontroller">

 <form>

Employee Name:-<input type="text" ng-model="uname" />
Password:-<input type="Password" ng-model="pass" />
<input type="button" value="Submit" ng-click="postData()" />

</form>

<script src="app.js"></script>

 </body>

</html>

app.js

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

app.controller('empcontroller', function ($scope, $http) {
$scope.postData = function (post) {
var data = {
uname:$scope.empcontroller.uname,
pass:$scope.empcontroller.pass
}
$http.post("http://localhost/query.php", { 'uname':     $scope.empcontroller.uname, 'pass': $scope.empcontroller.pass })
.success(function (data, status, headers, config) {
    console.log($scope.empcontroller.uname);
});
};   
});

query.php

<?php 
header('Access-Control-Allow-Origin: *');
header("Content-Type: application/json; charset=UTF-8");

$mysql_host = "localhost";
$mysql_database = "FirstDB";
$mysql_user = "root";
$mysql_password = "";
// Create connection
$conn = new mysqli($mysql_host, $mysql_user,    $mysql_password,$mysql_database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
} 
$data = json_decode(file_get_contents("php://input"));
$uname = mysql_real_escape_string($data->uname);
$pass = mysql_real_escape_string($data->pass);

$sql = "INSERT INTO Employee (Username,Password) VALUES ('$uname','$pass')";
$result = $conn->query($sql);
echo($uname);
error_log($uname);
$conn->close();

?>

当我尝试在我的localhost服务器上运行php文件(query.php)时,它会给我以下错误 -

  


  致命错误:未捕获错误:在I:\ xampp \ htdocs \ query.php中调用未定义函数&gt; mysql_real_escape_string():15   堆栈跟踪:

     

0 {main}

     

15

1 个答案:

答案 0 :(得分:1)

应为mysqli_real_escape_string

`i` is missing.

更新

据我所知,您的方法可以稍微修改一下。关于未找到uname的错误,可以纠正但是根据我的说法,当你使用AngularJS时,你可以更多地使用json。

表格可能就像,

<form ng-init="obj={}">

Employee Name:-<input type="text" ng-model="obj.uname" />
Password:-<input type="Password" ng-model="obj.pass" />
<input type="button" value="Submit" ng-click="postData(obj)" />

</form>

因此,现在您可以将对象作为函数参数从视图传递到控制器。

现在在控制器中,

app.controller('empcontroller', function ($scope, $http) {
    $scope.postData = function (obj) {
//NOTE THAT WE DON'T HAVE TO MAKE A NEW OBJECT TO PASS IN POST IF THIS APPROACH IS FOLLOWED.
 //HENCE, OUR OBJECT IS THE SAME WHICH WE PASSED FROM VIEW.
        $http.post("http://localhost/query.php",obj).then(function (response) {
            console.log(response.data);
        },function(error){
            console.error("Error : ",error);
        });
    };   
});

因此,您将完全按照自己的意愿获取PHP脚本中的$data

此外,您可以为此类http呼叫建立工厂或服务。

这是我建议的方法,遵循最佳实践。