【10】AngularJS SQL

AngularJS SQL

使用 PHP 从 MySQL 中获取数据

1. <div ng-app="myApp" ng-controller="customersCtrl">
3. <table>
4. <tr ng-repeat="x in names">
5. <td>{{ x.Name}}</td>
6. <td>{{ x.Country}}</td>
7. </tr>
8. </table>
10. </div>
12. <script>
13. var app = angular.module('myApp',[]);
14. app.controller('customersCtrl',function($scope, $http){
15. $http.get("test.php")
16. .success(function(response){$scope.names = response.records;});
17. });
18. </script>

 

---

ASP.NET 中执行 SQL 获取数据

1. <div ng-app="myApp" ng-controller="customersCtrl">
3. <table>
4. <tr ng-repeat="x in names">
5. <td>{{ x.Name}}</td>
6. <td>{{ x.Country}}</td>
7. </tr>
8. </table>
10. </div>
12. <script>
13. var app = angular.module('myApp',[]);
14. app.controller('customersCtrl',function($scope, $http){
15. $http.get("test.aspx")
16. .success(function(response){$scope.names = response.records;});
17. });
18. </script>

 

test.aspx 内容：

 

1. {"records":[
2. {
3. "Name":"Alfreds Futterkiste",
4. "City":"Berlin",
5. "Country":"Germany"
6. },
7. {
8. "Name":"Berglunds snabbköp",
9. "City":"Luleå",
10. "Country":"Sweden"
11. },
12. {
13. "Name":"Centro comercial Moctezuma",
14. "City":"México D.F.",
15. "Country":"Mexico"
16. },
17. {
18. "Name":"Ernst Handel",
19. "City":"Graz",
20. "Country":"Austria"
21. },
22. {
23. "Name":"FISSA Fabrica Inter. Salchichas S.A.",
24. "City":"Madrid",
25. "Country":"Spain"
26. },
27. {
28. "Name":"Galería del gastrónomo",
29. "City":"Barcelona",
30. "Country":"Spain"
31. },
32. {
33. "Name":"Island Trading",
34. "City":"Cowes",
35. "Country":"UK"
36. },
37. {
38. "Name":"Königlich Essen",
39. "City":"Brandenburg",
40. "Country":"Germany"
41. },
42. {
43. "Name":"Laughing Bacchus Wine Cellars",
44. "City":"Vancouver",
45. "Country":"Canada"
46. },
47. {
48. "Name":"Magazzini Alimentari Riuniti",
49. "City":"Bergamo",
50. "Country":"Italy"
51. },
52. {
53. "Name":"North/South",
54. "City":"London",
55. "Country":"UK"
56. },
57. {
58. "Name":"Paris spécialités",
59. "City":"Paris",
60. "Country":"France"
61. },
62. {
63. "Name":"Rattlesnake Canyon Grocery",
64. "City":"Albuquerque",
65. "Country":"USA"
66. },
67. {
68. "Name":"Simons bistro",
69. "City":"København",
70. "Country":"Denmark"
71. },
72. {
73. "Name":"The Big Cheese",
74. "City":"Portland",
75. "Country":"USA"
76. },
77. {
78. "Name":"Vaffeljernet",
79. "City":"Århus",
80. "Country":"Denmark"
81. },
82. {
83. "Name":"Wolski Zajazd",
84. "City":"Warszawa",
85. "Country":"Poland"
86. }
87. ]}

 

---

服务端代码

以下列出了列出了几种服务端代码类型：

1. 使用 PHP 和 MySQL。返回 JSON。
2. 使用 PHP 和 MS Access。返回 JSON。
3. 使用 ASP.NET, VB, 及 MS Access。 返回 JSON。
4. 使用 ASP.NET, Razor, 及 SQL Lite。 返回 JSON。

---

跨域 HTTP 请求

如果你需要从不同的服务器（不同域名）上获取数据就需要使用跨域 HTTP 请求。

跨域请求在网页上非常常见。很多网页从不同服务器上载入 CSS, 图片，Js脚本等。

在现代浏览器中，为了数据的安全，所有请求被严格限制在同一域名下，如果需要调用不同站点的数据，需要通过跨域来解决。

以下的 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. <%@ImportNamespace="System.IO"%>
2. <%@ImportNamespace="System.Data"%>
3. <%@ImportNamespace="System.Data.OleDb"%>
4. <%
5. Response.AppendHeader("Access-Control-Allow-Origin","*")
6. Response.AppendHeader("Content-type","application/json")
7. Dim conn AsOleDbConnection
8. Dim objAdapter AsOleDbDataAdapter
9. Dim objTable AsDataTable
10. Dim objRow AsDataRow
11. Dim objDataSet AsNewDataSet()
12. Dim outp
13. Dim c
14. conn =NewOledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")
15. objAdapter =NewOledbDataAdapter("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, VB Razor 和 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. {
11. if outp <>"" then outp = outp +","
12. outp = outp +"{"+ c +"Name"+ c +":"+ c +@row.CompanyName+ c +","
13. outp = outp + c +"City"+ c +":"+ c +@row.City+ c +","
14. outp = outp + c +"Country"+ c +":"+ c +@row.Country+ c +"}"
15. }
16. outp ="{"+ c +"records"+ c +":["+ outp +"]}"
17. @outp