如何将json从PHP传递给AngularJS

时间:2017-05-02 06:56:13

标签: php mysql angularjs json

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

我正在使用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;});
};
});

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

我认为你应该改变一下。在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>

答案 2 :(得分:0)

如果您想从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;
            });
});