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 相关文章推荐
javascript高级学习笔记整理
Aug 14 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
javascript异步处理工作机制详解
Apr 13 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
AngularJS轻松实现双击排序的功能
Aug 30 Javascript
JavaScript基础之this详解
Jun 04 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
JS实现数组去重的11种方法总结
Apr 04 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 insert语法详解
2008/06/07 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php ios推送(代码)
2013/07/01 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
基于jQuery架构javascript基础体系
2011/01/01 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
几种响应式文字详解
2017/05/19 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
Python 处理数据的实例详解
2017/08/10 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
Python数据库小程序源代码
2019/09/15 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
基于python实现坦克大战游戏
2020/10/27 Python
美国网上书店:Barnes & Noble
2018/08/15 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
我的梦想演讲稿
2014/04/30 职场文书
药店促销活动总结
2014/07/10 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年消防工作总结
2014/11/21 职场文书
董事长开业致辞
2015/07/29 职场文书
师德师风培训感言
2015/08/03 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
新手初学Java网络编程
2021/07/07 Java/Android