angularjs學習筆記之一（ajax請求），angularjsajax
實現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);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
