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 表单验证大全
Nov 23 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
vue弹窗插件实战代码
Sep 08 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
JavaScript this关键字的深入详解
Jan 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
PHP的基本常识小结
2013/07/05 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
jquery自定义表格样式
2015/11/23 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python中的zip函数使用示例
2015/01/29 Python
Python计算回文数的方法
2015/03/11 Python
Python创建二维数组实例(关于list的一个小坑)
2017/11/07 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python机器学习库xgboost的使用
2020/01/20 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
财务方面个人工作的自我评价
2013/12/28 职场文书
高中军训感言500字
2014/02/24 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书