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鏈接到數據庫

回答

相關問題