html 引入 angualrjs,AngularJS中引入$http服务

get请求

.html文件

{{data}}

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) {

//失败时的回调

})

}]);

.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文件

{{data}}

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) {

})

}])

.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文件

{{data}}

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) {

})

}])

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

}