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 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JS中的三个循环小结
Jun 20 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
javascript实现放大镜功能
Dec 09 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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.MVC的模板标签系统(二)
2006/09/05 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php生成图片缩略图的方法
2015/04/07 PHP
php编程每天必学之表单验证
2016/03/01 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
行政总监岗位职责
2013/12/05 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
五一手机促销方案
2014/03/08 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
在校证明模板
2015/06/17 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
pycharm无法安装cv2模块问题
2022/05/20 Python