从PHP连接到SQL的带有AngularJS的JSON数据_Php_Json_Angularjs_Postgresql

从PHP连接到SQL的带有AngularJS的JSON数据

php json angularjs postgresql

从PHP连接到SQL的带有AngularJS的JSON数据,php,json,angularjs,postgresql,Php,Json,Angularjs,Postgresql,connect.php <?php $host = "host=127.0.0.1"; $port = "port=5432"; $dbname = "dbname=Northwind"; $credentials = "user=postgres password=qwer1234"; $db = pg_connect( "$host $port $dbname $credentials" ); $sql

connect.php

<?php
   $host        = "host=127.0.0.1";
   $port        = "port=5432";
   $dbname      = "dbname=Northwind";
   $credentials = "user=postgres password=qwer1234";

   $db = pg_connect( "$host $port $dbname $credentials"  );

    $sql =<<<EOF
      SELECT * from customers;
EOF;

   $ret = pg_query($db, $sql);
   if(!$ret){
      echo pg_last_error($db);
      exit;
   } 
   $rows = array();
   while($r = pg_fetch_assoc($ret)){
      $rows[] = $r;
      echo json_encode($rows);
   }
?>

AngularJs.html

<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <div ng-controller="customersCtrl"> 
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>CustomerID</th>
                        <th>CompanyName</th>
                        <th>ContactName</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in customers">
                        <td>{{item.CustomerID}}</td>
                        <td>{{item.CompanyName}}</td>
                        <td>{{item.ContactName}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</html>
<script>

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

app.controller('customersCtrl', ['$scope', '$http', function($scope,$http) {
   console.log("Initiating the controller");
   $http.get('http://localhost:8080/connect.php').success(function(data) {
    $scope.customers = data;
    });
}]);
</script>


客户编号
公司名称
联系人姓名
{{item.CustomerID}
{{item.CompanyName}
{{item.ContactName}
var-app=angular.module（“myApp”，[]）；
app.controller（'customersCtrl'，['$scope'，'$http'，函数（$scope，$http）{
控制台日志（“启动控制器”）；
$http.get（'http://localhost:8080/connect.php）。成功（函数（数据）{
$scope.customers=数据；
});
}]);

结果是angularjs.html上没有显示任何内容帮助我！Thanx.

启动控制器

无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源站“null”。

请尝试从.get中读取

console.log（）

数据，以及

$scope.customers

以检查如何分配结果XmlHttpRequest无法加载。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源代码“null”。感谢您添加代码头（“访问控制允许源代码：”；标题（“内容类型：application/json；charset=UTF-8”）；完成。

<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <div ng-controller="customersCtrl"> 
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>CustomerID</th>
                        <th>CompanyName</th>
                        <th>ContactName</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in customers">
                        <td>{{item.CustomerID}}</td>
                        <td>{{item.CompanyName}}</td>
                        <td>{{item.ContactName}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</html>
<script>

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

app.controller('customersCtrl', ['$scope', '$http', function($scope,$http) {
   console.log("Initiating the controller");
   $http.get('http://localhost:8080/connect.php').success(function(data) {
    $scope.customers = data;
    });
}]);
</script>