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中的String对象常用方法
Feb 25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
JS性能优化实现方法及优点进行
Aug 30 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二分法查找数组是否包含某一元素
2013/05/23 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
laravel model 两表联查示例
2019/10/24 PHP
[原创]图片分页查看
2006/08/28 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python中@contextmanager实例用法
2021/02/07 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
主题酒店策划书
2014/01/28 职场文书
聚美优品的广告词
2014/03/14 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
感恩老师的演讲稿
2014/05/06 职场文书
幼师求职自荐信
2014/05/31 职场文书
钳工实训报告总结
2014/11/04 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
投诉书格式范本
2015/07/02 职场文书