参考手册
AngularJS Select
AngularJS HTML DOM

AngularJS SQL

AngularJS 非常适合显示数据库中的数据。只需确保数据是 JSON 格式。

从运行 MySQL 的 PHP 服务器获取数据

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, th , td  {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. table tr:nth-child(odd) {
  10.   background-color: #f1f1f1;
  11. }
  12. table tr:nth-child(even) {
  13.   background-color: #ffffff;
  14. }
  15. </style>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  17. <body>
  19. <div ng-app="myApp" ng-controller="customersCtrl">
  21. <table>
  22.   <tr ng-repeat="x in names">
  23.     <td>{{ x.Name }}</td>
  24.     <td>{{ x.Country }}</td>
  25.   </tr>
  26. </table>
  28. </div>
  30. <script>
  31. var app = angular.module('myApp', []);
  32. app.controller('customersCtrl', function($scope, $http) {
  33.    $http.get("customers_mysql.php")
  34.    .then(function (response) {$scope.names = response.data.records;});
  35. });
  36. </script>
  38. </body>
  39. </html>
运行一下

从 ASP.NET 服务器运行的 SQL 获取数据

AngularJS 实例
  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table, th, td {
  5.   border: 1px solid grey;
  6.   border-collapse: collapse;
  7.   padding: 5px;
  8. }
  9. table tr:nth-child(odd) {
  10.   background-color: #f1f1f1;
  11. }
  12. table tr:nth-child(even) {
  13.   background-color: #ffffff;
  14. }
  15. </style>
  16. <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  17. <body>
  19. <div ng-app="myApp" ng-controller="customersCtrl">
  21. <table>
  22.   <tr ng-repeat="x in names">
  23.     <td>{{ x.Name }}</td>
  24.     <td>{{ x.Country }}</td>
  25.   </tr>
  26. </table>
  28. </div>
  30. <script>
  31. var app = angular.module('myApp', []);
  32. app.controller('customersCtrl', function($scope, $http) {
  33.     $http.get("customers_sql.aspx")
  34.     .then(function (response) {$scope.names = response.data.records;});
  35. });
  36. </script>
  38. </body>
  39. </html>
运行一下

服务端实例

以下部分列出了用于获取 SQL 数据的服务器代码。

  • 使用 PHP 和 MySQL，返回 JSON。
  • 使用 PHP 和 MS Access，返回 JSON。
  • 使用 ASP.NET、VB 和 MS Access，返回 JSON。
  • 使用 ASP.NET、Razor 和 SQLLite，返回 JSON。

跨站点 HTTP 请求

来自不同服务器（请求页面除外）的数据请求称为 跨站点 HTTP 请求。

跨站点请求在 web 上很常见。许多页面从不同的服务器加载 CSS、图像和脚本。

在现代浏览器中，出于安全原因，来自 脚本 的跨站点 HTTP 请求被限制在 同一 个站点。

在我们的 PHP 示例中，添加了以下行以允许跨站点访问。

  1.   header("Access-Control-Allow-Origin: *");

1. PHP 和 MySQL 的服务端代码

  1. <?php
  2. header("Access-Control-Allow-Origin: *");
  3. header("Content-Type: application/json; charset=UTF-8");
  5. $conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
  7. $result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
  9. $outp = "";
  10. while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
  11.   if ($outp != "") {$outp .= ",";}
  12.   $outp .= '{"Name":"' . $rs["CompanyName"] . '",';
  13.   $outp .= '"City":"'  . $rs["City"]    . '",';
  14.   $outp .= '"Country":"'. $rs["Country"]   . '"}';
  15. }
  16. $outp ='{"records":['.$outp.']}';
  17. $conn->close();
  19. echo($outp);
  20. ?>

2. PHP 和 MS Access 服务端代码

  1. <?php
  2. header("Access-Control-Allow-Origin: *");
  3. header("Content-Type: application/json; charset=ISO-8859-1");
  5. $conn = new COM("ADODB.Connection");
  6. $conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");
  8. $rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");
  10. $outp = "";
  11. while (!$rs->EOF) {
  12.   if ($outp != "") {$outp .= ",";}
  13.   $outp .= '{"Name":"' . $rs["CompanyName"] . '",';
  14.   $outp .= '"City":"'  . $rs["City"]    . '",';
  15.   $outp .= '"Country":"'. $rs["Country"]   . '"}';
  16.   $rs->MoveNext();
  17. }
  18. $outp ='{"records":['.$outp.']}';
  20. $conn->close();
  22. echo ($outp);
  23. ?>

3. ASP.NET, VB 和 MS Access 服务端代码

  1. <%@ Import Namespace="System.IO"%>
  2. <%@ Import Namespace="System.Data"%>
  3. <%@ Import Namespace="System.Data.OleDb"%>
  4. <%
  5. Response.AppendHeader("Access-Control-Allow-Origin", "*")
  6. Response.AppendHeader("Content-type", "application/json")
  7. Dim conn As OleDbConnection
  8. Dim objAdapter As OleDbDataAdapter
  9. Dim objTable As DataTable
  10. Dim objRow As DataRow
  11. Dim objDataSet As New DataSet()
  12. Dim outp
  13. Dim c
  14. conn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
  15. objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)
  16. objAdapter.Fill(objDataSet, "myTable")
  17. objTable=objDataSet.Tables("myTable")
  19. outp = ""
  20. c = chr(34)
  21. for each x in objTable.Rows
  22. if outp <> "" then outp = outp & ","
  23. outp = outp & "{" & c & "Name"    & c & ":" & c & x("CompanyName") & c & ","
  24. outp = outp &       c & "City"    & c & ":" & c & x("City")        & c & ","
  25. outp = outp &       c & "Country" & c & ":" & c & x("Country")     & c & "}"
  26. next
  28. outp ="{" & c & "records" & c & ":[" & outp & "]}"
  29. response.write(outp)
  30. conn.close
  31. %>

4. ASP.NET, Razor C# 和 SQL Lite 服务端代码

  1. @{
  2. Response.AppendHeader("Access-Control-Allow-Origin", "*")
  3. Response.AppendHeader("Content-type", "application/json")
  4. var db = Database.Open("Northwind");
  5. var query = db.Query("SELECT CompanyName, City, Country FROM Customers");
  6. var outp =""
  7. var c = chr(34)
  8. }
  9. @foreach(var row in query){
  10. if (outp != "") {outp = outp + ","}
  11. outp = outp + "{" + c + "Name"  + c + ":" + c + @row.CompanyName + c + ","
  12. outp = outp +    c + "City"  + c + ":" + c + @row.City    + c + ","
  13. outp = outp +    c + "Country" + c + ":" + c + @row.Country   + c + "}"
  14. }
  15. outp ="{" + c + "records" + c + ":[" + outp + "]}"
  16. @outp
AngularJS Select
AngularJS HTML DOM

分类导航