AngularJS链接到数据库

的index.phpAngularJS链接到数据库

<!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连接到数据库，我一直在做错什么？

来源

2015-06-12 user3233074

它在我看来像你这里的大问题是你使用$ 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的输出（因为如果你访问自己的网站，而不是代码）在项目中。一个有用的调试技巧是如果你想调试，在你的代码中输入

alert(JSON.stringify(varname))

。这会弹出一个警报，其中包含变量的JSON内容作为字符串。在你的情况下，这将是：

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

我很抱歉任何代码格式问题。我是新来的堆栈溢出系统。

来源

2015-06-12 04:33:22

我希望但仍然没有运气，并欢迎堆栈溢出，这里的一切都很棒。 – user3233074

感谢user3233074！我再次查看了您的代码并注意到了一些事情。首先，在JavaScript中调用控制器GetUser，在HTML中调用GetUser。所以你只需要匹配名称就可以使用控制器本身。其次，你需要关闭控制器（你错过了'}）;'最后）。在这两个更改之后，加载页面时会弹出放置在getProject（）中的警报。我会进行这些更改并查看是否从数据库获取数据。让我知道它是如何工作的。噢，如果有帮助，这里是我使用的撬棍：http://jsfiddle.net/dakra/U3pVM/。 –

我改变了你告诉我的，但我仍然没有从数据库中获取数据。 – user3233074

您从控制器的外部呼叫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，因此您只能在网络控制台中看到数据。

来源

2015-06-12 18:15:00 swatkins

AngularJS链接到数据库

回答

相关问题