AngularJS实现ajax请求的方法

2019-11-19 18:53:49

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》及《PHP+ajax技巧与应用小结》

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

上一篇：JavaScript ES6中CLASS的使用详解

下一篇：js数组操作方法总结(必看篇)