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 相关文章推荐
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php操作SVN版本服务器类代码
2011/11/27 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
JavaScript实用技巧(一)
2010/08/16 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
2011/09/29 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Web服务器框架 Tornado简介
2014/07/16 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
小学语文教研活动总结
2014/07/01 职场文书
群众路线领导对照材料
2014/08/23 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书