Heim > Backend-Entwicklung > PHP-Tutorial > 利用Angularjs从PHP读取后台数据

利用Angularjs从PHP读取后台数据

WBOY
Freigeben: 2016-07-29 08:57:10
Original
1094 Leute haben es durchsucht

之前已经有很多方法可以通过angular进行本地数据的读取。以前的例子中,大多数情况都是将数据存放到模块的$scope变量中,或者直接利用ng-init定义初始化的数据。但是这些方法都只为了演示其他功能的效果。这次来学习一下如何将Angular和PHP相结合,从后台读取数据。

首先,利用PHP,我们定义了一组后台数据,代码如下(test.php):

<?php header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "") {$outp .= ",";}
    $outp .= '{"Name":"'  . $rs["CompanyName"] . '",';
    $outp .= '"City":"'   . $rs["City"]        . '",';
    $outp .= '"Country":"'. $rs["Country"]     . '"}'; 
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>
Nach dem Login kopieren
这段代码含义比较简单,连接数据库后,从数据库中利用sql语句选择相应的数据($conn->query("SELECT CompanyName, City,Country FROM Customers"))。之后,利用循环结构,将取出的数据以键值对的形式保存在$outp变量中。
接下来,在js中操作如下:

<div ng-app="myApp" ng-c>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>

</div>
<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;customersCtrl&#39;, function($scope, $http) {
    $http.get("test.php")
    .success(function (response) {$scope.names = response.records;});
});
</script>
Nach dem Login kopieren
这里仍然应用了$http服务进行数据的读取,传入数据文件对应的url路径,成功后返回数据,并绑定到$scope.names变量上。

以上就介绍了利用Angularjs从PHP读取后台数据,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage