AngularJS连接到数据库

Question

AngularJS连接到数据库

3

index.php

<!doctype html>
<html ng-app="rjtApp">
<head>
<title>PHP MySQL API Consumed with AngularJS</title>
<script src="angular.min.js"></script>
<script src="data.js"></script>
</head>

<body>
<div ng-controller="GetUsers">

<table>
<thead><tr><th>Name</th></tr></thead>
<tbody>
<tr ng-repeat="user in users"><td>{{ user.name }}</td></tr>
</tbody>
</tfoot></tfoot>
</table>

</div>
</body>

</html>

api.php（我已经测试过，这个连接没有问题。）

<?php

        // set up the connection variables
        $db_name  = 'air';
        $hostname = '127.0.0.1';
        $username = 'root';
        $password = '123456';

        // connect to the database
        $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);

        // a query get all the records from the users table
        $sql = 'SELECT USER_NAME FROM air_users LIMIT 1';

        // use prepared statements, even if not strictly required is good practice
        $stmt = $dbh->prepare( $sql );

        // execute the query
        $stmt->execute();

        // fetch the results into an array
        $result = $stmt->fetch( PDO::FETCH_ASSOC );

        // convert to json
        $json = json_encode( $result );

        // echo the json string
        echo $json;
?>

data.js

alert("this is connect");

var app = angular.module("rjtApp", []);

app.controller("GetUsers", function($scope, $http)

{

  function getProject(){

      $http.get("api.php").success(function(data){

        $scope.projects = data; //the data are stored in projects

 });

};

});

getProject();

我的意图是进行实时验证以检查数据库名称是否存在，但我甚至无法弄清楚如何将AngularJS连接到数据库，我做错了什么？

- user3233074

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Avery · Answer 1

在我看来，你在这里遇到的最大问题是使用了 $http.post 而不是 $http.get。Post 是用于提交更改和新对象（比如提交表单），而 get 则是用于获取输出。

因此，你应该能够改变

$http.post("api.php").success(function(data){
    $scope.projects = data; //the data are stored in projects
});

到

$http.get("api.php").success(function(data){
    $scope.projects = data; //the data are stored in projects
});

这将把加载api.php的输出（就像您自己访问网站而不是在代码中）存储在projects中。一个有用的调试提示是放置

。

alert(JSON.stringify(varname))

如果你想要调试你的代码，可以在其中加入以下代码。当运行时，它会弹出一个包含变量JSON内容的字符串的警告。在你的情况下，代码应该是：

alert(JSON.stringify($scope.projects)).

对于任何代码格式问题，我深表歉意。我是新手，还不熟悉 stack overflow 系统。

- swatkins · Answer 2

你正在从控制器外部调用getProject，因此在那里它是未定义的（它是控制器的本地变量）。所以将该调用移动到内部：

alert("this is connect");

var app = angular.module("rjtApp", []);

app.controller("GetUsers", function($scope, $http)

{

    function getProject() {

        $http.get("api.php").success(function(data) {

            $scope.projects = data; //the data are stored in projects

        });

    };
    getProject(); // moved this line

});

然后，$http服务应该运行。从技术上讲，你应该使用GET请求，但是使用POST也可以达到同样的效果。我想指出的是，你当前在页面中没有使用projects - 所以你只能在网络控制台中看到数据。