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

Display data collected from MYSQL to html page using AngularJs and PHP

本文关键字：数据 页面 html MYSQL AngularJs PHP 显示 使用      更新时间：2023-09-26

我是AngularJS新手。我正在研究一个项目，其中应用程序显示从MYSQL的内容(虚拟表与航班详细信息，其中有航空公司，出发，到达，持续时间和价格列)在HTML表中使用PHP和angalarjs。我写过AngularJs和PHP的代码。现在，当我试图将检索到的数据显示为html时，我无法这样做(我试图直接访问PHP文件，它以JSON格式显示数据)。请查看我的HTML(flights.html)，JAVASCRIPT/AngularJS(Flights.js)和PHP(Flights.php)代码:

<!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();
}
?>

此外，当我看到控制台时，我可以找到对象(数组元素)为array [6]0: Object1: Object2: Object3: Object4: Object5: Objectlength: 6__proto__: array [0]通过这个，我知道数据已经传递给javascript，但由Angularjs代码/javascript代码是不合适的。所以，请帮助我，提前感谢

你应该这样做:

$scope.response = response;

代替:

$scope.response = response.data;

原因如下:

如果你使用承诺:

.then(function successCallback(response)

那么你应该做response.data;

当您使用.success时，第一个参数已经是您的response.data。在这种情况下，你称之为"响应"，这可能让你感到困惑。使用.success时，避免将参数命名为"response"。例如:

 .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])} Header getter函数。
  • config - {Object} -用来生成请求的配置对象。
  • statusText - {string} -响应的HTTP状态文本。

https://docs.angularjs.org/api/ng/service/http美元

和使用.success()的每个响应属性都是一个参数:

。成功(数据、状态)

相关文章：