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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
extjs render 用法介绍
Sep 11 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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,js双版本
2012/09/25 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
PHP对象相关知识总结
2017/04/09 PHP
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Numpy的简单用法小结
2019/08/28 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
艺术应用与设计个人的自我评价
2013/11/23 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
小学开学典礼主持词
2014/03/19 职场文书
水电工程师岗位职责
2015/02/13 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Redis数据同步之redis shake的实现方法
2022/04/21 Redis