1.$http:
基本使用:$http({url:’users.json’,method:’get’})
then(sucessFn,errorFn)
简写形式:get()/post()/delete()/put()/jsonp()/head()
比如:(这种传值方法之前也有用过)
$http.get('data/users.json').success(function (data) {
$scope.users = data.users;
});
2.$http设置对象:
(有十多种, 我就拿最常用的几种就好)
method:请求的HTTP方法:get/post/put/delete/jsonp/head
url:绝对或相对url,即请求目标
params:添加url参数时设置该对象
data:通常发送post请求,设置参数用
params的使用:
params的使用就像是url中:url?username=???,age=???这样的形式;
例如:
$http.get('data/users.json',{params:{username:'tom',age:20}}).success(function (data) {
$scope.users = data.users;
});
data常使用在表单中,可以通过表单中的post方法提交数据:
$scope.submit = function () {
//表单提交,构造参数
$http.post('addUser.php',{//添加到addUser.php中
data:{username:$scope.username,age:$scope.age}
});
}
前端用过ng-model绑定input;
3.模拟一套完整的传值方法(php):
创建一个表单,测试post方法传参:
$scope.submit = function () {
//表单提交,构造参数
$http.post('addUser.php',{
data:{username:$scope.username,age:$scope.age}
}).success(function (data) {
console.log(data);
});
}
php:
post和put数据的接收
php常规接收方式:$_POST[‘username’],$_REQUEST[‘username’]
*由于Content-Type:application/json
解决方案:修改后台接收参数的方式为如下:
json_decode(file_get_contents(‘php://input’),true)
例子:
//先将其他input类型数据放在params,然后转化为json编码格式:
$params = json_decode(file_get_contents('php://input'),true);
//将其打印到控制台:
echo json_encode($params);
4.缓存HTTP请求:
1.第一种的简单设置:设置缓存
$http.get('data/users.json',{cache:true}).success(function (data) {
$scope.users = data.users;
});
2.第二种稍微复杂一些:自定义缓存对象,通过$cacheFactory服务获取实例
if(!lru){
lru = $cacheFactory('lru',{capacity:20});
}
$http.get('data/users.json',{cache:lru}).success(function (data) {
$scope.users = data.users;
});
5.拦截器:设置$httpProvider
1.修改默认Content-Type:application/json
2.设置默认缓存
3.拦截器:在任何请求发送给服务器之前或者从服务器返回时可以对其拦截,从而为请求添加全局的功能。
4.场景:身份验证、错误处理等
5.拦截器的类型:request、response、requestError、responseError
6.创建拦截器:1、创建拦截器工厂服务;2、注册该服务
具体实现如下:
1.app.config(function ($httpProvider) {
//修改默认Content-Type为url-encoded
$httpProvider.defaults.headers.post['Content-Type']='application/x-www.form-urlencoded;charset=utf-8';
$httpProvider.defaults.headers.put['Content-Type']='application/x-www.form-urlencoded;charset=utf-8';
//设置默认缓存
$httpProvider.defaults.cache=true;
//注册一个拦截器
$httpProvider.interceptors.push('myInterceptor');
});
2.声明一个拦截器工厂服务
app.factory('myInterceptor', function () {
//此处可以设置4个属性:request、response、requestError、responseError
return {
request: function (config) {
//可以修改配置对象
config.headers.customInfo='Tom';//添加此信息
console.log(config);
return config;
},
response: function (config) {
console.log(config);
return config;
},
requestError: function (rejection) {
console.log(rejection);
return rejection;
},
responseError: function (rejection) {
console.log(rejection);
return rejection;
}
}
});