AngularJS入门教程中SQL实例详解


Posted in Javascript onJuly 27, 2016

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

Javascript 相关文章推荐
编写Js代码要注意的几条规则
Sep 10 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Vue使用screenfull实现全屏效果
Sep 17 Javascript
AngularJS入门教程之表格实例详解
Jul 27 #Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 #Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 #Javascript
关于JS中的方法是否加括号的问题
Jul 27 #Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 #Javascript
AngularJS入门教程之服务(Service)
Jul 27 #Javascript
AngularJS 过滤器的简单实例
Jul 27 #Javascript
You might like
php公用函数列表[正则]
2007/02/22 PHP
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
javascript 获取元素样式必杀技
2014/05/04 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python程序封装为win32服务的方法
2021/03/07 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
工程班组长岗位职责
2013/12/30 职场文书
班级旅游计划书
2014/05/03 职场文书
财务部绩效考核方案
2014/05/04 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
护士节慰问信
2015/02/15 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
JavaScript原型链详解
2021/11/07 Javascript
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python