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 相关文章推荐
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
js数组去重的常用方法总结
Jan 24 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
javascript每日必学之运算符
Feb 16 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
javascript数组使用调用方法汇总
2007/12/08 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python画图学习入门教程
2016/07/01 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python新手学习标准库模块命名
2020/05/29 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
教师自我评价范例
2013/09/24 职场文书
文秘专业毕业生就业推荐信
2013/11/08 职场文书
医院信息公开实施方案
2014/05/09 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
婚礼答谢礼品
2015/01/20 职场文书
英文导游词
2015/02/13 职场文书
2019军训心得体会
2019/06/27 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
pt-archiver 主键自增
2022/04/26 MySQL
Python中tqdm的使用和例子
2022/09/23 Python