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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JScript实现地址选择功能
Aug 15 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
Node.js fs模块原理及常见用途
Oct 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
2016/12/20 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
python爬取网站数据保存使用的方法
2013/11/20 Python
python模块smtplib学习
2018/05/22 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Python中qutip用法示例详解
2020/10/02 Python
求高于平均分的学生学号及成绩
2016/09/01 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
《晏子使楚》教学反思
2014/02/08 职场文书
教师师德承诺书
2014/03/26 职场文书
低碳环保倡议书
2014/04/14 职场文书
销售人员求职信
2014/07/22 职场文书
处级干部考察材料
2014/12/24 职场文书
清洁工岗位职责
2015/02/13 职场文书
环保建议书范文
2015/09/14 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Django显示可视化图表的实践
2021/05/10 Python
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
使用nginx配置访问wgcloud的方法
2021/06/26 Servers