我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。
1、链式调用
可以是:GET/DELETE/HEAD/JSONP/POST/PUT
②url:绝对的或者相对的请求目标
③params(字符串map或者对象)
这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。
比如这个:
这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。
从AngularJS 1.3开始,它还可以在POST请求里发送二进制数据。要发送一个blob对象,你可以简单地通过使用data参数来传递它。
例如:
AngularJS传递给then()方法的响应对象包含了四个属性。
data
这个数据代表转换过后的响应体(如果定义了转换的话)
status
响应的HTTP状态码
headers
这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字值
例如,用如下代码获取X-Auth-ID的值:
这个对象是用来生成原始请求的完整设置对象。
status(字符串)
这个字符串是响应的HTTP状态文本。
3.GET请求实例
1、链式调用
$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。
$http({
method: string,
url: string,
params: object,
data: string or object,
headers: object,
transformRequest: function transform(data, headersGetter) or an array of functions,
transformResponse: function transform(data, headersGetter) or an array of functions,
cache: boolean or Cache object,
timeout: number,
withCredentials: boolean
}).success(function(data,status,config,headers){
//响应成功
}).error(function(data,status,config,headers){
//处理响应失败
});
①method
可以是:GET/DELETE/HEAD/JSONP/POST/PUT
②url:绝对的或者相对的请求目标
③params(字符串map或者对象)
这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果值不是字符串,会被JSON序列化。
比如这个:
//参数会转为?name=ari的形式
$http({
params:{'name':'ari'}
});
④data(字符串或者对象)
这个对象中包含了将会被当作消息体发送给服务器的数据。通常在发送POST请求时使用。
从AngularJS 1.3开始,它还可以在POST请求里发送二进制数据。要发送一个blob对象,你可以简单地通过使用data参数来传递它。
例如:
var blob=new Blob(['Hello world'],{type:'text/plain'});
$http({
method:'POST',
url:'/',
data:blob
});
2、响应对象
AngularJS传递给then()方法的响应对象包含了四个属性。
data
这个数据代表转换过后的响应体(如果定义了转换的话)
status
响应的HTTP状态码
headers
这个函数是头信息的getter函数,可以接受一个参数,用来获取对应名字值
例如,用如下代码获取X-Auth-ID的值:
$http({
method: 'GET',
url: '/api/users.json'
}).then (resp) {
// 读取X-Auth-ID
resp.headers('X-Auth-ID');
});
config
这个对象是用来生成原始请求的完整设置对象。
status(字符串)
这个字符串是响应的HTTP状态文本。
3.GET请求实例
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="alert alert-danger">
真实姓名:{{data.RealName}}
<br />
{{data}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Get请求
$http.get('/ashx/dataone.ashx', {
params: { name: '张三' }
}).success(function (data, status, config, headers) {
//处理成功
console.info(data);
$scope.data = data;
console.info(status);
console.info(config);
console.info(headers);
})
.error(function (data, status, config, headers) {
//响应失败
console.info(status);
console.info(headers);
console.info(config);
console.info(data);
});
});
</script>
4.POST请求实例
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="alert alert-danger">
真实姓名:{{data.RealName}}
<br />
{{data}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Post请求
//默认情况下,后台接受Form参数失败
var postData = {
name: '李四',
text: '大容量内容'
};
$http.post('/ashx/dataone.ashx', postData).success(function (data, status, config, headers) {
//处理成功
console.info(data);
$scope.data = data;
console.info(status);
console.info(config);
console.info(headers);
})
.error(function (data, status, config, headers) {
//响应失败
console.info(status);
console.info(headers);
console.info(config);
console.info(data);
});
}).config(function ($httpProvider) {
// 头部配置
//$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
//$httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript, */*; q=0.01';
//$httpProvider.defaults.headers.post['X-Requested-With'] = 'XMLHttpRequest';
});
</script>
5.$http请求实例
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="alert alert-danger">
真实姓名:{{data.RealName}}
<br />
{{data}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
//Get请求
$http({
method: 'GET',
url: '/ashx/dataone.ashx',
params: {
name: '张三', text: '内容'
}
}).success(function (data, status, config, headers) {
$scope.data = data;
console.info(data);
});
//Post请求
//默认情况下,后台接受Form参数失败
var postData = {
name: '李四',
text: '大容量内容'
};
$http({
url: '/ashx/dataone.ashx',
method:'POST',
data:postData
}).success(function (data, status, config, headers) {
//处理成功
console.info(data);
$scope.data = data;
console.info(status);
console.info(config);
console.info(headers);
});
});
</script>
Get请求成功
更多: