使用AngularJs和PHP显示从MYSQL收集到html页面的数据 [英] Display data collected from MYSQL to html page using AngularJs and PHP
问题描述
我是AngularJS的新手.我正在一个项目中，该应用程序使用PHP和AngualarJS在HTML表中显示MYSQL(带有航班详细信息的虚拟表中的内容，其中包含航班，离境，到达，持续时间和价格列).我已经为AngularJs和PHP编写了代码.现在，当我尝试将检索到的数据显示为html时，我无法做到(我试图直接访问我的PHP文件，并且它以JSON formate形式显示数据).请查看我的HTML(flights.html)， JAVASCRIPT/AngularJS(Flights.js)和PHP(Flights.php)代码:
I am new to AngularJS. I am working on an project where the application displays content from MYSQL(dummy table with flight details which has Airlines,departure,Arrival,Duration and Price columns) in a HTML table using PHP and AngualarJS. I have written the code for AngularJs and PHP. Now,when I try to display the retrieved data to html I am not able to do so(I tried to access my PHP file directly, and it displays the data in JSON formate ).Please look at my HTML(flights.html),JAVASCRIPT/AngularJS(Flights.js) and PHP(Flights.php) code:
<!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 CODE
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代码. 所以，请为此提供帮助，并在此先感谢
moreover when I see the console I can find the objects(array elements) as Array[6]0: Object1: Object2: Object3: Object4: Object5: Objectlength: 6__proto__: Array[0] By this I am aware that data has been passed to javascript but by Angularjs code/javascript code is not appropriate. So, please help me with this, and thanks in advance
推荐答案
您应该这样做:
$scope.response = response;
代替:
$scope.response = response.data;
这是为什么:
如果您使用诺言:
.then(function successCallback(response)
那你应该做response.data;
在使用.success时，第一个参数已经是您的response.data.
在这种情况下，您将其称为响应"，这可能使您感到困惑.使用.success时，请避免将参数命名为响应".使用类似的东西:
As you are using .success, the first argument already is your response.data.
In this case you called it 'response' and this may have confused you. When using .success avoid naming the argument as 'reponse'. Use something like:
.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)您将获得响应对象:
响应对象具有以下属性:
The response object has these properties:
- data – {string | Object} –使用转换函数转换的响应主体.
- 状态-{数字}-响应的HTTP状态代码.
- 标头– {function([headerName])}标头获取函数.
- config – {Object} –用于生成请求的配置对象.
- statusText – {string} –响应的HTTP状态文本.
https://docs.angularjs.org/api/ng/service/ $ http
并使用.success()每个响应属性都是一个参数:
and using .success() each one of the response properties is an argument:
.成功(数据，状态)
这篇关于使用AngularJs和PHP显示从MYSQL收集到html页面的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
