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获取scrollHeight问题想到的标准问题
May 27 Javascript
javascript中var的重要性分析
Feb 11 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
Vue实现push数组并删除的例子
Nov 01 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php截取字符串函数分享
2015/02/02 PHP
学习php设计模式 php实现桥梁模式(bridge)
2015/12/07 PHP
PHP7 list() 函数修改
2021/03/09 PHP
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Django values()和value_list()的使用
2020/03/31 Python
python 画图 图例自由定义方式
2020/04/17 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python日志器使用方法及原理解析
2020/09/27 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
产品质量保证书
2014/04/29 职场文书
销售员岗位职责
2014/06/09 职场文书
地球上的星星观后感
2015/06/02 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python