AngularJS入门教程中SQL实例详解

前端技术 2023/09/05 JavaScript

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 代码实例

<?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);
?>

2. PHP 和 MS Access 代码实例

<?php
header(\"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 OleDbConnection
Dim objAdapter As OleDbDataAdapter
Dim objTable As DataTable
Dim objRow As DataRow
Dim objDataSet As New DataSet()
Dim outp
Dim c
conn = 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.Rows
if 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 & \"}\"
next

outp =\"{\" & 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资料的整理，后续继续补充,希望能帮助学习的朋友。

本文地址：https://www.stayed.cn/item/14113

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案