angularjs和mysql_AngularJS入门教程中SQL实例详解

AngularJS SQL

在前面章节中的代码也可以用于读取数据库中的数据。

使用 PHP 从 MySQL 中获取数据

AngularJS 实例

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;

}

{{ x.Name }}

{{ x.Country }}

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

});

运行结果：

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

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;

}

{{ x.Name }}

{{ x.Country }}

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

});

运行结果：

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

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

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

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