Angular.js如何从PHP读取后台数据


Posted in Javascript onMarch 24, 2016

之前已经有很多方法可以通过angular进行本地数据的读取。以前的例子中,大多数情况都是将数据存放到模块的$scope变量中,或者直接利用ng-init定义初始化的数据。但是这些方法都只为了演示其他功能的效果。这次来学习一下如何将Angular和PHP相结合,从后台读取数据
首先,利用PHP,我们定义了一组后台数据,代码如下(test.php):

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

 这段代码含义比较简单,连接数据库后,从数据库中利用sql语句选择相应的数据($conn->query("SELECT CompanyName, City,Country FROM Customers"))。之后,利用循环结构,将取出的数据以键值对的形式保存在$outp变量中。
接下来,在js中操作如下:

<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("test.php") 
  .success(function (response) {$scope.names = response.records;}); 
}); 
</script>

 这里仍然应用了$http服务进行数据的读取,传入数据文件对应的url路径,成功后返回数据,并绑定到$scope.names变量上。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
原生JS实现pc端轮播图效果
Dec 21 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 #Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 #Javascript
JavaScript驾驭网页-DOM
Mar 24 #Javascript
常用的JQuery函数及功能小结
Mar 24 #Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 #Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 #Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 #Javascript
You might like
php之curl设置超时实例
2014/11/03 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
js href的用法
2010/05/13 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
Python的subprocess模块总结
2014/11/07 Python
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python 系统调用的实例详解
2017/07/11 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python操作redis方法总结
2018/06/06 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
大学生学年自我鉴定
2014/02/10 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
保险公司演讲稿
2014/09/02 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python