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 相关文章推荐
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 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新手上路(七)
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
webpack入门必知必会
2017/01/16 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
vue项目中使用scss的方法步骤
2019/05/16 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python虚拟环境迁移方法
2019/01/03 Python
Python使用random模块生成随机数操作实例详解
2019/09/17 Python
Pytorch之finetune使用详解
2020/01/18 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
大学总结自我鉴定
2014/01/18 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
法律六进活动方案
2014/03/13 职场文书
学校就业推荐信范文
2014/05/19 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
python爬虫selenium模块详解
2021/03/30 Python
vue引入Excel表格插件的方法
2021/04/28 Vue.js