返回Angular......登陆

AngularJS实现ajax请求的方法

巴扎黑2017-01-07 15:59:59773

本文实例讲述了AngularJS实现ajax请求的方法。分享给大家供大家参考,具体如下:

【HTML 代码】

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!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】

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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】

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<?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实现ajax请求的方法请关注PHP中文网(www.php.cn)其他文章! 

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送