angularjs学习笔记之一(ajax请求)
2015-03-30 10:34
330 查看
实现ajax请求
【HTML 代码】
【js代码 ajax.js】
【PHP代码 ajax.php】
【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);
相关文章推荐
- springmvc学习笔记——ajax请求的问题
- AngularJS学习笔记(3)——通过Ajax获取JSON数据
- 【前端学习笔记】2015-09-11~~~~ js中ajax请求返回案例
- Angularjs学习笔记——Ajax服务(跨域)&&ng路由
- 学习笔记之利用ajax请求xml文件,解析其中内容
- JSP学习笔记(十四):关于ajax请求成功时返回的是jsonSring还是jsonObject的问题
- jsp学习笔记(十一):在jsp用ajax请求微信接口时,返回错误,提示status:0,statusText:error
- PHP学习笔记5-PHP-AJAX请求、文件上传、验证码
- MVC学习笔记之使用JQuery方式发送Ajax请求调用后台Controller
- php学习笔记(三十)ajax请求和接收参数的实现方式(包括json数据格式的简单处理)
- WebService学习笔记-Ajax请求Webservice
- WebService学习笔记-Ajax通过servlet请求跨域Webservice
- PHP学习笔记5-PHP-AJAX请求、文件上传、验证码
- AJAX 学习笔记(7) 发送请求参数
- WebService学习笔记-Ajax通过servlet请求跨域Webservice
- JS学习笔记(三):HTML通过ajax请求获取并显示php中的内容
- WebService学习笔记-Ajax请求Webservice
- 【前端学习笔记】2015-09-02 附~~~~~ajax简单请求和获得响应结果
- AJAX学习笔记之 处理多个异步请求
- jQuery 之ajax jsonp跨域请求学习笔记