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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
文本域光标操作的jQuery扩展分享
Mar 10 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
学习Node.js模块机制
Oct 17 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
pw的一个放后门的方法分析
2007/10/08 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
用JavaScript脚本实现Web页面信息交互
2006/10/11 Javascript
一页面多XMLHttpRequest对象
2007/01/22 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
js实现左右两侧浮动广告
2018/07/09 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python学习数据结构实例代码
2015/05/11 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python变量和字符串详解
2017/04/29 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python装饰器用法实例总结
2018/05/26 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python识别html主要文本框过程解析
2020/02/18 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
股份合作协议书范本
2014/04/14 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
PHP解决高并发问题
2021/04/01 PHP