AngularJS入门教程中SQL实例详解  更新时间:2016年07月27日 17:54:46   投稿:lqh   本文主要介绍 AngularJS SQL,这里给大家整理了相关资料,并提供了实例代码,有需要的小伙伴可以参考下 AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据。 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 {{ x.Name }} {{ x.Country }} 运行结果: 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 实例 {{ x.Name }} {{ x.Country }} 运行结果: 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 代码实例 2. PHP 和 MS Access 代码实例 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资料的整理,后续继续补充,希望能帮助学习的朋友。 您可能感兴趣的文章: AngularJS Bootstrap详细介绍及实例代码 AngularJS中的API(接口)简单实现 AngularJS 输入验证详解及实例代码 AngularJS中的表单简单入门 AngularJS 模块详解及简单实例 AngularJS 中的事件详解 AngularJS 入门教程之HTML DOM实例详解 AngularJS入门教程之表格实例详解 AngularJS入门教程之Select(选择框)详解 AngularJS中的包含详细介绍及实现示例 AngularJS SQL 相关文章 AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息) 最近做项目遇到这样的需求,要求添加球员的功能,具体样式没做具体要求,下面小编给大家带来了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),感兴趣的朋友一起看看吧 2017-10-10 AngularJS基础学习笔记之控制器 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域意外的作用域实例的。当你或者AngularJS本身通过scope.$new俩创建一个新的子作用域对象时,有一个选项能让你将它当做参数传递给控制器。 2015-05-05 Angular实现的进度条功能示例 这篇文章主要介绍了Angular实现的进度条功能,结合实例形式较为详细的分析了angular进度条功能的相关界面布局、功能等操作技巧,需要的朋友可以参考下 2018-02-02 AngularJS中filter的使用实例详解 这篇文章主要介绍了AngularJS中filter的使用实例详解的相关资料,这里提供实例帮助大家理解掌握,希望能帮助到大家,需要的朋友可以参考下 2017-08-08 学习AngularJs:Directive指令用法(完整版) 这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 2016-04-04 AngularJS中关于ng-class指令的几种实现方式详解 这篇文章给大家介绍了angularJS中ng-class指令的三种实现方式,其中包括通过数据的双向绑定、通过对象数组和通过key/value这三种方式,有需要的朋友们可以参考学习,下面来一起看看吧。 2016-09-09 AngularJS基础 ng-copy 指令实例代码 本文主要介绍AngularJS ng-copy 指令,这里帮大家整理了ng-copy指令的基础资料,并附有示例代码和效果图,有需要的朋友参考下 2016-08-08 解决Angularjs异步操作后台请求用$q.all排列先后顺序问题 解决Angularjs异步操作后台请求用$q.all排列先后顺序问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-11-11 详解Angular的内置过滤器和自定义过滤器【推荐】 在实际的开发过程中,很多后端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理。本文将对Angular的内置过滤器和自定义过滤器进行详细介绍,下面跟着小编一起来看下吧 2016-12-12 angular4中*ngFor不能对返回来的对象进行循环的解决方法 今天小编就为大家分享一篇angular4中*ngFor不能对返回来的对象进行循环的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 最新评论

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

您可能感兴趣的文章:

  • AngularJS Bootstrap详细介绍及实例代码
  • AngularJS中的API(接口)简单实现
  • AngularJS 输入验证详解及实例代码
  • AngularJS中的表单简单入门
  • AngularJS 模块详解及简单实例
  • AngularJS 中的事件详解
  • AngularJS 入门教程之HTML DOM实例详解
  • AngularJS入门教程之表格实例详解
  • AngularJS入门教程之Select(选择框)详解
  • AngularJS中的包含详细介绍及实现示例
张贴在3