HelloWood

AngularJS发送异步Get/Post请求

2018-01-01

1 . 在页面中加入AngularJS并为页面绑定ng-app 和 ng-controller

1
2
3
4
<body ng-app="MyApp" ng-controller="MyCtrl" >
...
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>

2 . 添加必要的控件并绑定相应的事件

1
2
3
4
get:<input type="text" ng-model="param">{{param}} <br>
post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
<button ng-click="get()">Get</button>
<button ng-click="post()">Post</button>

3 . 在JS脚本中发送进行Get/Post请求

  • get
1
2
3
4
5
6
7
8
9
10
11
$scope.get = function () {
        $http.get("/get", {params: {param: $scope.param}})
            .success(function (data, header, config, status) {
                console.log(data);
            })
            .error(function (data, header, config, status) {
                console.log(data);
            })
        ;
    }

  • get 将参数放在URL中
1
2
3
4
5
6
7
8
9
10
11
$scope.get = function () {
        $http.get("/get?param="+$scope.param)
            .success(function (data, header, config, status) {
                console.log(data);
            })
            .error(function (data, header, config, status) {
                console.log(data);
            })
        ;
    }

  • post 
1
2
3
4
5
6
7
8
9
10
$scope.post = function () {
        $http.post("/post", $scope.user)
            .success(function (data, header, config, status) {
                console.log(data);
            })
            .error(function (data, header, config, status) {
                console.log(data);
            })
        ;
    }

4 . 由Controller处理请求并返回结果

  • get
    1
    2
    3
    4
    5
    6
    7
    @RequestMapping("/get")
    @ResponseBody
    public Map<String,String> get(String param) {
        System.out.println("param："+param);
        response.put("state", "success");//将数据放在Map对象中
        return response;
    }
  • post
1
2
3
4
5
6
7
8
9
10
11
@RequestMapping("/post2")
@ResponseBody
public void post2(@RequestBody  User user, HttpServletResponse resp) {
    //返回不同的http状态
    if(user.getName()!=null&&!user.getName().equals("")){
        resp.setStatus(200);
    }
    else{
        resp.setStatus(300);
    }
}
  • 如果需要配置请求头部
1
2
3
4
5
6
7
8
9
$http({
    method : "POST",
    url : "/post",
    data : $scope.user
}).success(function(data, header, config, status) {
    console.log(data);
}).error(function(data, header, config, status) {
    console.log(data);
});

5 . 由JS http请求的回调函数处理并执行下一步操作

  • HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Request</title>
</head>

<body ng-app="MyApp" ng-controller="MyCtrl" >
get:<input type="text" ng-model="param"><br>
post: <input type="text" ng-model="user.name"><input type="text" ng-model="user.password"><br>
    <button ng-click="get()">Get</button>
    <button ng-click="post()">Post</button>
</body>
<script src="js/angular.min.js"></script>
<script src="js/sbt.js"></script>
</html>
  • sbt.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 app = angular.module("MyApp", []);
app.controller("MyCtrl", function ($scope, $http) {

    $scope.get = function () {
        $http.get("/get", {params: {param: $scope.param}})
            .success(function (data, header, config, status) {
                console.log(data);
            })
            .error(function (response) {
                console.log(response);
            })
        ;
    }
   
    $scope.post = function () {
        $http.post("/post", $scope.user)
            .success(function (data, header, config, status) {
                console.log(data);
            })
            .error(function (data, header, config, status) {
                console.log(data);
            })
        ;
    }
});
Tags: AngularJs Request
← HTML中使用Ajax进行局部刷新页面 AngularJS中使用ngTable →