- 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 '失败';
}