使用AngularJs和PHP显示从MYSQL收集到html页面的数据

Question

我是AngularJS的新手。 我正在开发一个项目，其中应用程序使用PHP和AngualarJS在HTML表格中显示来自MYSQL的内容（带有航班详情的虚拟表，包括航空公司，出发，到达，持续时间和价格列）。 我已经为AngularJs和PHP编写了代码。 现在，当我尝试将检索到的数据显示为html时，我无法这样做（我试图直接访问我的PHP文件，并以JSON格式显示数据）。请查看我的HTML（flights.html）， JAVASCRIPT / AngularJS（Flights.js）和PHP（Flights.php）代码：

HTML代码

<!DOCTYPE html>
<html ng-app="mymodule">
<head>
<title>Flights</title>        
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="Flights.js" type="text/javascript"></script>
</head> 
<body ng-controller="myCtrl">
<table>
    <thead>
      <tr>
         <th>Airlines</th>                     
         <th>Departure</th> 
         <th>Arrival</th>
         <th>Duration</th>
         <th>Price</th>
      </tr>
    </thead>
    <tbody>
          <tr ng-repeat = "flights in response">
            <td>{{flights.Airlines}}</td>                                        
            <td>{{flights.departure}}</td>
            <td>{{flights.Arrival}}</td>
            <td>{{flights.Duration}}</td>
            <td>{{flights.Price}}</td>                       
          </tr>
   </tbody>
</table>       
</body>
</html>

JAVASCRIPT代码

var response;
var app = angular.module('mymodule', []);
app.controller('myCtrl', function($scope, $http) 
{  $http.get("Flights.php")
   .success(function(response)
   {
       //$scope.myWelcome = response;
       //$scope.myWelcome = response.data;       
       $scope.response = response.data;
       console.log(response);      
   })
   .error(function()
   {
        $scope.response = "error in fetching data";
   });
});

PHP代码

<?php
$conn = mysqli_connect("localhost","","",'flight_details');
$data = array();
// Check connection
if (!$conn)
{
    die("Connection failed: " . mysqli_connect_error());
}
else
{      
    $sql = "select * from flights";
    $result = $conn->query($sql);

    if($result->num_rows > 0)
    {

        while ($row = $result->fetch_array())
        {

            $data[] = $row;

        }
        $res_final = json_encode($data);         
        echo $res_final;
    } 
    else
    {
        echo"0 results";

    }   
    $conn->close();
}
?>

此外，当我看到控制台时，我可以找到对象（数组元素）作为数组[6] 0：对象1：对象2：对象3：对象4：对象5：对象长度：6__proto__：数组[0]由此我知道数据已通过到javascript但由Angularjs代码/ javascript代码是不合适的。 所以，请帮助我，并提前感谢

Answer 1

你应该做：

$scope.response = response;

代替：

$scope.response = response.data;

原因如下：

如果你使用承诺：

.then(function successCallback(response)

那你应该做response.data ;

当您使用.success ，第一个参数已经是您的response.data 。 在这种情况下，您将其称为“响应”，这可能会使您感到困惑。 使用.success时，请避免将参数命名为“reponse”。 使用类似的东西：

 .success(function(data) {           
      $scope.lstWeeklyMenu = data;

看看： http ： //www.codelord.net/2015/05/25/dont-use-$https-success/

和

https://www.peterbe.com/plog/promises-with- $ http

简而言之：

.then(response)你得到了响应对象：

响应对象具有以下属性：

data - {string | Object} - 使用转换函数转换的响应体。
status - {number} - 响应的HTTP状态代码。
headers - {function（[headerName]）}标头getter函数。
config - {Object} - 用于生成请求的配置对象。
statusText - {string} - 响应的HTTP状态文本。

https://docs.angularjs.org/api/ng/service/ $ http

并使用.success()每个响应属性都是一个参数：

.success（数据，状态）

使用AngularJs和PHP显示从MYSQL收集到html页面的数据

问题描述

HTML代码

JAVASCRIPT代码

PHP代码

1 个解决方案

解决方案1
0 2016-11-16 17:41:43

使用AngularJs和PHP显示从MYSQL收集到html页面的数据

问题描述

HTML代码

JAVASCRIPT代码

PHP代码

1 个解决方案

解决方案1 0 2016-11-16 17:41:43

解决方案1
0 2016-11-16 17:41:43