AngularJS中引入$http服务

2017-10-11 本文已影响0人小草莓蹦蹦跳

get请求

.html文件

<body ng-app="app" ng-controller="wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>

<script>
    var app = angular.module('app',[]);

    app.controller('wmxController',['$scope','$http',function ($scope,$http) {
        $http({
            url:'02.php',

            //下面这种根据参数加后缀的方法比较繁琐，当参数很多时，地址的后面名会很长。
            // 特此推荐用传递参数的方法。如下
//            url:'02.php?aa=bb&aaa=bbb',

            method:'get',

            //推荐使用这种方法传递参数。记得用引号包裹。在传递的过程中，会自动帮你转成get.php?aa=bb&aaa=bbb
            params:{
                'aa':'bb',
                'aaa':'bbb'
            }
        }).success(function (res) {
            //成功时的回调 接收服务器返回的数据res
            $scope.data = res;
            console.log($scope.data);
        }).error(function (error) {
            //失败时的回调
        })
    }]);
</script>
</body>

.php文件

<?php
header("content-type:text/html;charset=utf-8");

/**
 *
 * Created by PhpStorm.
 * User: 小草莓
 * Date: 2017/10/10
 * Time: 15:44
 *
 */

//传递的参数
$res1 = $_GET['aa'];
$res2 = $_GET['aaa'];

//对参数进行判断
if($res1 == 'bb' && $res2 == 'bbb' ){
    echo '成功，我是服务器返回的数据';
}else{
    echo '失败';
}

//若在要接受参数，而url或者html中没有传递参数
//可手动在地址上问号后面加上aa=bb&aaa=bbb，看是否能解析成功。

post请求
- 两个请求的不同之处：
  post请求要加上请求头，get请求不需要请求头；
  默认是不加请求头，是以json Content-Type:application/json;charset=UTF-8;
  以php为例，post是接受不到json的，所以会发生错误
  post接受的是formData 是key:value
  
  参数的格式不同。
- 传递1个参数的时候
  .html文件

<body ng-app="app" ng-controller="wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>

<script>
    var app = angular.module('app',[]);

    app.controller('wmxController',['$scope','$http',function ($scope,$http) {
        $http({
            url:'03.php',

//请求方式是post
            method:'post',

//加上请求头
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },

//传递的参数
//data:{}传参形式。
//在传递数据时，默认是以json形式来传递的 。
//aa:'bb' 属于json串(formData)。以下属于soap
            data:'aa=bb'

}).success(function (res) {
            $scope.data = res;
            console.log($scope.data);
        }).error(function (error) {

        })
    }])

</script>
</body>

.php文件

<?php
header("content-type:text/html;charset=utf-8");
/**
 *
 * Created by PhpStorm.
 * User: 小草莓
 * Date: 2017/10/10
 * Time: 15:44
 *
 */
//传递的参数
$res1 = $_POST['aa'];

//对参数进行判断
if($res1 == 'bb'){
    echo '成功，我是服务器返回的数据';
}else{
    echo '失败';
}

传递2个参数的时候
.html文件

<body ng-app="app" ng-controller="wmxController">

<p>{{data}}</p>

<script src="angular.js"></script>

<script>

    var app = angular.module('app',[]);

    app.controller('wmxController',['$scope','$http',function ($scope,$http) {
        $http({
            url:'03.php',
            method:'post',

            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },

//传递的参数（该方法可以同时用于传递1个或多个参数的时候）
            data:{
                "aa":"bb",
                "aaa":"bbb"
               },

//对参数进行序列化
             transformRequest: function(obj) {
                 var str = [];
                 for (var s in obj) {
                     str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
                }
                 return str.join("&");
             }

        }).success(function (res) {
            $scope.data = res;
            console.log($scope.data);
        }).error(function (error) {

        })
    }])
</script>
</body>

.php文件

<?php
header("content-type:text/html;charset=utf-8");

/**
 *
 * Created by PhpStorm.
 * User: 小草莓
 * Date: 2017/10/10
 * Time: 15:44
 *
 */

//传递的参数
$res2 = $_POST['aaa'];

//对参数进行判断
if($res1 == 'bb' && $res2 == 'bbb'){
    echo '成功，我是服务器返回的数据';
}else{
    echo '失败';
}

AngularJS中引入$http服务

猜你喜欢

热点阅读