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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
详解JavaScript的变量
Apr 04 Javascript
js实现坦克大战游戏
Feb 24 Javascript
javascript实现拼图游戏
Jan 29 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php while循环得到循环次数
2013/10/26 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
Bootstrap每天必学之折叠(Collapse)插件
2016/04/25 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
vue组件学习教程
2017/09/09 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python实现划词翻译
2020/04/23 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python将unicode转为str的方法
2017/06/21 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
求职推荐信
2013/10/28 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
公司领导班子对照材料
2014/08/18 职场文书
简历中自我评价范文
2015/03/11 职场文书
社区安全温馨提示语
2015/07/14 职场文书
Python实现位图分割的效果
2021/11/20 Python