AngularJS入門教程中SQL執行個體詳解

AngularJS入門教程中SQL執行個體詳解_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

AngularJS SQL

在前面章節中的代碼也可以用於讀取資料庫中的資料。

使用 PHP 從 MySQL 中擷取資料

AngularJS 執行個體

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f1f1f1;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names">  <td>{{ x.Name }}</td>  <td>{{ x.Country }}</td> </tr></table> </div> <script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) {  $http.get("/try/angularjs/data/Customers_MySQL.php")  .success(function (response) {$scope.names = response.records;});});</script></body></html>

運行結果：

Alfreds Futterkiste	Germany
Ana Trujillo Emparedados y helados	Mexico
Antonio Moreno Taquería	Mexico
Around the Horn	UK
B's Beverages	UK
Berglunds snabbköp	Sweden
Blauer See Delikatessen	Germany
Blondel père et fils	France
Bólido Comidas preparadas	Spain
Bon app'	France
Bottom-Dollar Marketse	Canada
Cactus Comidas para llevar	Argentina
Centro comercial Moctezuma	Mexico
Chop-suey Chinese	Switzerland
Comércio Mineiro	Brazil

ASP.NET 中執行 SQL 擷取資料

AngularJS 執行個體

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><style>table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px;}table tr:nth-child(odd) { background-color: #f1f1f1;}table tr:nth-child(even) { background-color: #ffffff;}</style></head><body><div ng-app="myApp" ng-controller="customersCtrl"> <table><tr ng-repeat="x in names"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr></table></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) {  $http.get("http://www.runoob.com/try/angularjs/data/Customers_SQL.aspx")  .success(function (response) {$scope.names = response.records;});});</script></body></html>

運行結果：

Alfreds Futterkiste	Germany
Berglunds snabbköp	Sweden
Centro comercial Moctezuma	Mexico
Ernst Handel	Austria
FISSA Fabrica Inter. Salchichas S.A.	Spain
Galería del gastrónomo	Spain
Island Trading	UK
Königlich Essen	Germany
Laughing Bacchus Wine Cellars	Canada
Magazzini Alimentari Riuniti	Italy
North/South	UK
Paris spécialités	France
Rattlesnake Canyon Grocery	USA
Simons bistro	Denmark
The Big Cheese	USA
Vaffeljernet	Denmark
Wolski Zajazd	Poland

服務端代碼

以下列出了列出了幾種服務端代碼類型：

使用 PHP 和 MySQL。返回 JSON。

使用 PHP 和 MS Access。返回 JSON。

使用 ASP.NET, VB, 及 MS Access。返回 JSON。

使用 ASP.NET, Razor, 及 SQL Lite。返回 JSON。

跨域 HTTP 要求

如果你需要從不同的伺服器（不同網域名稱）上擷取資料就需要使用跨域 HTTP 要求。
跨域請求在網頁上非常常見。很多網頁從不同伺服器上傳入 CSS, 圖片，Js指令碼等。
在現代瀏覽器中，為了資料的安全，所有請求被嚴格限制在同一網域名稱下，如果需要調用不同網站的資料，需要通過跨域來解決。
以下的 PHP 代碼運行使用的網站進行跨域訪問。

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

更多跨域訪問解決方案可參閱：PHP Ajax 跨域問題最佳解決方案。

1. PHP 和 MySql 代碼執行個體

<?phpheader("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);?>

2. PHP 和 MS Access 代碼執行個體

<?phpheader("Access-Control-Allow-Origin: *");header("Content-Type: application/json; charset=ISO-8859-1");$conn = new COM("ADODB.Connection");$conn->open("PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb");$rs = $conn->execute("SELECT CompanyName, City, Country FROM Customers");$outp = "";while (!$rs->EOF) {  if ($outp != "") {$outp .= ",";}  $outp .= '{"Name":"' . $rs["CompanyName"] . '",';  $outp .= '"City":"'  . $rs["City"]    . '",';  $outp .= '"Country":"'. $rs["Country"]   . '"}';   $rs->MoveNext();}$outp ='{"records":['.$outp.']}';$conn->close();echo ($outp);?>

3. ASP.NET, VB 和 MS Access 代碼執行個體

<%@ Import Namespace="System.IO"%><%@ Import Namespace="System.Data"%><%@ Import Namespace="System.Data.OleDb"%><%Response.AppendHeader("Access-Control-Allow-Origin", "*")Response.AppendHeader("Content-type", "application/json")Dim conn As OleDbConnectionDim objAdapter As OleDbDataAdapterDim objTable As DataTableDim objRow As DataRowDim objDataSet As New DataSet()Dim outpDim cconn = New OledbConnection("Provider=Microsoft.Jet.OLEDB.4.0;data source=Northwind.mdb")objAdapter = New OledbDataAdapter("SELECT CompanyName, City, Country FROM Customers", conn)objAdapter.Fill(objDataSet, "myTable")objTable=objDataSet.Tables("myTable")outp = ""c = chr(34)for each x in objTable.Rowsif outp <> "" then outp = outp & ","outp = outp & "{" & c & "Name"  & c & ":" & c & x("CompanyName") & c & ","outp = outp &    c & "City"  & c & ":" & c & x("City")    & c & "," outp = outp &    c & "Country" & c & ":" & c & x("Country")   & c & "}"nextoutp ="{" & c & "records" & c & ":[" & outp & "]}"response.write(outp)conn.close%>

4. ASP.NET, VB Razor 和 SQL Lite 代碼執行個體

@{Response.AppendHeader("Access-Control-Allow-Origin", "*")Response.AppendHeader("Content-type", "application/json")var db = Database.Open("Northwind");var query = db.Query("SELECT CompanyName, City, Country FROM Customers");var outp =""var c = chr(34)}@foreach(var row in query){if outp <> "" then outp = outp + ","outp = outp + "{" + c + "Name"  + c + ":" + c + @row.CompanyName + c + ","outp = outp +    c + "City"  + c + ":" + c + @row.City    + c + ","outp = outp +    c + "Country" + c + ":" + c + @row.Country   + c + "}"}outp ="{" + c + "records" + c + ":[" + outp + "]}"@outp

以上就是AngularJS SQL資料的整理，後續繼續補充,希望能協助學習的朋友。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More