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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
js 走马灯简单实例
Nov 21 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
vue的列表交错过渡实现代码示例
May 05 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
layui使用label标签的方法
Sep 14 Javascript
vue-cli设置publicPath小记
Apr 14 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文件上传实例详解!!!
2007/01/02 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
python实现备份目录的方法
2015/08/03 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
详解python中的装饰器
2018/07/10 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
简单了解python的内存管理机制
2019/07/08 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
介绍一下.net和Java的特点和区别
2012/09/26 面试题
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
班组建设经验交流材料
2014/05/12 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
运动会口号大全
2014/06/07 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
面试通知短信
2015/04/20 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2015年财政局工作总结
2015/05/21 职场文书
小学副班长竞选稿
2015/11/21 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js