【发布时间】:2015-09-19 03:38:17
【问题描述】:
我将简要解释一下我要做什么。
我在 mySql 数据库上有不同的条目,我想从 PHP 页面加载它们,转换为 JSON,并最终通过 AngularJS 读回它们。到目前为止,除了最后一个,我已经完成了所有步骤。我会一步一步来,以便其他人可以参考:
/// 使用 PHP 从 SQL 数据库中获取数据
access_db.php
<!DOCTYPE html>
<html>
<body>
<?php
$host = "myhost";
$user = "myusername";
$psw = "mypsw";
$dbname = "mydatabasename";
//open connection to mysql db
$conn = mysqli_connect($host,$user,$psw,$dbname); // Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT EntryName as name, EntryType as type, EntryPlatform as platform, EntryStatus as status, EntryDate as submitDate FROM pl_entries";
$result = $conn->query($sql);
$rows = array();
if ($result->num_rows > 0){
while($r = $result->fetch_assoc()){
$rows[] = $r;
}
echo json_encode($rows);
} else {
echo "0 results";
}
mysqli_close($conn);
?>
</body>
</html>
如果我运行 php 文件,我会得到:
[{"name":"name1","type":"type1","platform":"platform1","status":"status1","submitDate":"date1"},{"name" :"name2","type":"type2","platform":"platform2","status":"status2","submitDate":"date2"},{"name":"name3","type" :"type3","platform":"platform3","status":"status3","submitDate":"date3"},{"name":"name4","type":"type4","platform" :"platform4","status":"status4","submitDate":"date4"}]
因此与数据库的连接似乎工作正常。
/// 使用 ANGULARJS 读取 JSON (有问题的部分)
为此,我当然需要 HTML 页面和 JS 文件。
dbService.js
var app = angular.module('dbApp', []);
function GetEntries($scope, $http){
$http.get('/php/access_db.php').success(function(data) {
$scope.entries = data;
});
}
index.html(我删除了部分代码以使其更具可读性)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="js/dbService.js"></script>
</head>
<body ng-app="dbApp">
<div class="main" ng-controller="GetEntries">
<div class="container">
<!-- ENTRIES LIST -->
<div id="diary">
<div ng-repeat="entry in entries | orderBy: '-date'">
<div class="row">
<h1>{{ entry.submitDate | date: 'dd' }}</h1>
<p>{{ entry.submitDate | date: 'MMM'}}, {{ entry.submitDate | date: 'yyyy'}}</p>
<p>{{ entry.type }}</p>
<h1>{{ entry.name }}</h1>
<p>{{ entry.platform }}</p>
<p>{{ entry.status }}</p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
这样做的结果是 index.html 上没有显示任何内容。
编辑:为了更清楚,没有出现任何 AngularJS 元素,我猜这意味着它正确地尝试加载数据,但可能无法正确解析它。
我相信该项目在 JS 文件中,但此时我尝试了很多不同的东西,我只是感到困惑。我希望有人可以帮助我了解如何解决这种情况,我希望我提供了足够的详细信息。
谢谢!
【问题讨论】:
-
添加console.log(data);在 $scope.entries = 数据之后;并复制粘贴或告诉我你在控制台中有什么
-
尝试在函数后添加
$scope.getEntries(); -
您确定您正确声明了控制器吗?我不知道,因为你没有给出那段代码
-
正如你所提到的,在这个阶段我确定我搞砸了控制器。这实际上是我的 js 文件中唯一的代码
-
@ThomasP1988 出于某种原因,Firebug 不想调试页面,我不知道为什么......
标签: javascript php mysql json angularjs