AngularJS实现ajax请求的方法
2016-11-22 09:32
639 查看
【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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》及《PHP+ajax技巧与应用小结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
- AngularJs ng-repeat 嵌套如何获取外层$index
- AngularJS入门(用ng-repeat指令实现循环输出
- AngularJS ng-repeat数组有重复值的解决方法
- Angularjs的ng-repeat中去除重复数据的方法
- AngularJS使用ng-repeat指令实现下拉框
- AngularJS基础 ng-repeat 指令简单示例
- Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
- AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
- 实例详解angularjs和ajax的结合使用
- 在AngularJS中使用AJAX的方法
- AngularJS ng-repeat指令及Ajax的应用实例分析
相关文章推荐
- 在ASP.NET中使用IHttpHandler处理请求(如自实现AJAX)时,无法获得Session(或者说是Session 为 null)的原因及解决方法
- 下面给出一个$.ajax()方法实现异步请求的例子
- 下面给出一个$.ajax()方法实现异步请求的例子
- AJAX跨域请求json数据的实现方法
- AJAX跨域请求json数据的实现方法
- 通过自己写的方法实现不用ajax的POST方法请求(在网上看到的,感觉很实用)
- $.ajax方法的使用-AJAX请求客户端和服务端的实现
- AJAX跨域请求json数据的实现方法
- AJAX跨域请求json数据的实现方法
- 重写ajax方法实现异步请求session过期时跳转登录页面
- 重写ajax方法实现异步请求session过期时跳转登录页面
- jQuery delegate方法实现Ajax请求绑定事件不丢失
- jquery+ajax实现跨域请求的方法
- 关于js 方法,实现ajax请求时,return false/true无效的问题
- AngularJS 中设置 AJAX get 请求不缓存的方法
- 重写ajax方法实现异步请求session过期时跳转登录页
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- 原生JavaScrpit中异步请求Ajax实现方法
- 重写ajax方法实现请求session过期时跳转登录页面
- 重写ajax方法实现异步请求session过期时跳转登录页面(转)