AngularJS实现ajax请求的方法


Posted in Javascript onNovember 22, 2016

本文实例讲述了AngularJS实现ajax请求的方法。分享给大家供大家参考,具体如下:

【HTML 代码】

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="" />
  <title>angularjs实现 ajax</title>
</head>
<body ng-app="HelloAjax">
  <div ng-controller="HelloAjax">
    <form>
      <input type="text" ng-model="username" />
      <input type="text" ng-model="email" />
    </form>
    <table>
     <tr ng-repeat="user in users">
       <td>{{user.username}}</td>
       <td>{{user.email}}</td>
     </tr>
    </table>
    <button ng-click="get_more();">get more</button>
  </div>
</body>
<script type="text/javascript" src="./js/angular.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="ajax.js" charset="utf-8"></script>
</html>

【js代码 ajax.js】

var myModule = angular.module("HelloAjax",[]);
myModule.controller("HelloAjax",["$scope","$http",function HelloAjax($scope,$http){
  /*
  $scope.users=[{'username':"zhangsan","email":"zs@11.com"},
    {'username':"zhangsan2","email":"zs@22.com"},
    {'username':"zhangsan3","email":"zs@33.com"}];
  */
  $scope.get_more = function(){
    $http({
        method: "POST",
        url: "./ajax.php",
        data:{'username':$scope.username,
           'email':$scope.email
          }
      }).
      success(function(data, status) {
       //$scope.status = status;
        $scope.users = data;
      }).
      error(function(data, status) {
       //$scope.data = data || "Request failed";
       //$scope.status = status;
     });
   }
}]);

【PHP代码 ajax.php】

<?php
//获取参数
$data = file_get_contents("php://input");
$user = json_decode($data);
//查询数据库
$conn = mysql_connect("localhost","root","");
mysql_select_db("test");
$sql ="select username,email from users ";
$res = mysql_query($sql,$conn);
$users = array();
while($row = mysql_fetch_assoc($res)){
  $users[] = $row;
}
//当然这里简化了插入数据库
$users[] = array('username'=>$user->username,
         'email'=>$user->email);
//返回数据库
echo json_encode($users);

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
解决layui-open关闭自身窗口的问题
Sep 10 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
js数组操作方法总结(必看篇)
Nov 22 #Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 #Javascript
js字符串操作总结(必看篇)
Nov 22 #Javascript
JavaScript的兼容性与调试技巧
Nov 22 #Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 #Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 #Javascript
老生常谈原生JS执行环境与作用域
Nov 22 #Javascript
You might like
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
详解yii2使用多个数据库的案例
2017/06/16 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
UI Events 用户界面事件
2012/06/27 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
js在指定位置增加节点函数insertBefore()用法实例
2015/01/12 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
详解jquery和vue对比
2019/04/16 jQuery
vue获取data数据改变前后的值方法
2019/11/07 Javascript
python实现八大排序算法(2)
2017/09/14 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
服装公司总经理岗位职责
2013/11/30 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
党员廉洁自律承诺书
2014/05/26 职场文书
义和团口号
2014/06/17 职场文书
借款协议书
2014/09/16 职场文书
优秀团支部申报材料
2014/12/26 职场文书
2015年征兵工作总结
2015/07/23 职场文书
教师病假条范文
2015/08/17 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python