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 相关文章推荐
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 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
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python实现网页自动签到功能
2019/01/21 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
营销人才自我鉴定范文
2013/12/25 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
年终总结会议主持词
2014/03/17 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
初三语文教学计划
2015/01/22 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS