【问题标题】:Read JSON data with AngularJS from PHP connecting to SQL使用 AngularJS 从 PHP 连接到 SQL 读取 JSON 数据
【发布时间】: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


【解决方案1】:

您遇到此问题有几个可能的原因。尝试确保您的控制器首先工作。检查您的控制台以查看它是否正在启动。

我认为您对控制器和服务感到困惑。我看到你注入了 GetServices,这意味着服务不是控制器

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

myApp.controller('GetEntries', ['$scope', '$http', function($scope,$http) {
   console.log("Initiating the controller");
   $http.get('/php/access_db.php').success(function(data) {
    $scope.entries = data;
    });
}]);

这是一个使用$http.get 的简单应用。我使用随机 API,但它应该适用于您的 PHP 服务器。 http://plnkr.co/edit/ZzPrkg8yokh1jXtzrmdR

这不是一个真正的好习惯。尝试将 http 请求移动到服务而不是控制器。

【讨论】:

  • 感谢@geckob 的回答。出于某种原因,Firebug 不想调试页面,我无法检查控制台...
  • @AlexKalopsia:很奇怪。我对火狐不熟悉。我正在使用 Chrome。无法检查控制台是什么意思?
  • 好的,我设法解决了这个问题。这是控制台日志:Initiating the controller angular.min.js:102 ReferenceError: $http is not defined at new &lt;anonymous&gt; (dbService.js:5) at Object.e [as invoke] (angular.min.js:36) at x.instance (angular.min.js:76) at angular.min.js:59 at q (angular.min.js:7) at M (angular.min.js:59) at g (angular.min.js:51) at g (angular.min.js:51) at angular.min.js:51 at angular.min.js:18
  • 对不起。我错过了$http 注射。修复代码
  • 太棒了。这是一个CORS问题。很好,你修好了。可能是。但是您的 php 文件不应包含我认为的任何 html 标记。它应该返回一个 JSON 数据。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-17
  • 2018-01-02
  • 2020-07-20
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多