如何将 json 从 PHP 传递到 AngularJS答案

【问题标题】：How to pass a json from PHP to AngularJS如何将 json 从 PHP 传递到 AngularJS
【发布时间】：2017-09-29 14:56:51
【问题描述】：

我是网络开发的新手，所以这对某些人来说可能是一个简单的问题，希望对其他初学者有用。

我正在使用 php 脚本从 mysql 数据库中选择一些数据（帐户）。我希望将此选定的数据传递给角度变量，以便我可以使用 ngRepeat 创建输出。我必须对我的 PHP 和/或 Angular 文件进行哪些更改？

现在 JSON 已构建，问题是，我无法返回调用 PHP 的 html。我该如何管理？

感谢您的帮助克里斯

HTML

<form action="./backend/display_accounts.php" method="post">
  <input class="btn btn-default" type="submit" value="display accounts"/>
</form>
<ul>
  <li ng-repeat="account in accounts">
  {{ account.account_name }}
  </li>
</ul>

PHP

<?php 
include 'connect.php';
$sql = //myQuery//
$result = $conn->query($sql);
//return ($result);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$json_arry = json_encode($row);
echo $json_array;}
}
else {
      echo "0 results";
}
$conn->close();
?>

AngularJS

var app = angular.module("myApp", ['ngRoute'])
app.controller('accountsController', function($scope, $http) {
$scope.displayData = function(){
$http.get("./backend/display_accounts.php")
 .then(function (response) {$scope.accounts = response.data.records;});
};
});

【问题讨论】：

您遇到的问题在哪里？您是否从任何地方收到任何类型的错误？
问题是，我在页面上看不到结果。但我认为这可能在带有 $http.get 的 html 之前。如何明确定位问题？
现在构建了 JSON，问题是，我没有回到我调用 PHP 的 html。我该如何管理？
我认为您在 HTML 中遗漏了 'ng-app="myApp"'。你没有吗？
当我点击按钮时，我看到显示的 JSON。我在打开它时期待网站上的数据。为什么我错了？

标签： php mysql angularjs json

【解决方案1】：

由于您已经将数据获取到变量（帐户）中。您可以在 html 中使用以下代码查看结果

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li ng-repeat="account in accounts">
      {{ account }}
    </li>
  </ul>
</div>

</body>
</html>

【讨论】：

如果您需要任何澄清，请询问我。我可以理解您是 Angular 的新手 :-)
不错的答案，但我认为你应该为他解释清楚。如果您使用 {{account}}，您将获得 json 文件
@ThanhTùng：感谢您的考虑。我明白你的意思:-)
谢谢大家。但这没有用。我在该页面上看不到任何内容，但也没有收到任何错误消息。但我确实从选择中得到了结果。

【解决方案2】：

我认为你应该改变一下。在 php 中

$sql = //myQuery//
$row = array(); //here is change
$result = $conn->query($sql);
return ($result);
if ($result->num_rows > 0) {
while($r= $result->fetch_assoc()) {
$row[]= $r; //here is change
$json_arry = json_encode($row);
echo $json_array;
}

角度来看

$http.get("./backend/display_accounts.php")
 .then(function (response) {$scope.accounts = response.data;}); //you dont need record in here if json file of you dont have the key records
};

如果你喜欢的 json 文件你应该需要记录，但如果没有。你不需要它。

{"records":
[
{// your data}]}

如果你的json文件有a ,b ,c 或者一些东西而不是记录，你应该这样写

$scope.accounts = response.data.a; //a b c or some thing for ex I use a

你可以像html一样显示

<ul ng-repeat= account in accounts>
 <account. ...>
</ul>

【讨论】：

【解决方案3】：

如果您想从 php 中的多个表查询中获取数据，您可以使用此代码。

首先，在output.php中：

$sql1 = "SELECT ....";
$result = $conn->query($sql1);

$r ['value1']= array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $r['value1'][] = $row;
    }
}

$sql2 = "SELECT ....";
$result = $conn->query($sql2);

$r ['value2']= array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $r['value2'][] = $row;
    }
}

echo json_encode($r);

在角度控制中：

var app = angular.module('ngApp', []);
app.controller('ngCtrl', function($scope, $http) {
    $http.get("output.php")
            .then(function (result) {
                console.log(result.data);
                $scope.firstvalue = result.data.value1;
                $scope.secondvalue = result.data.value2;
            });
});

【讨论】：