作者：乔山办公网日期：
返回目录：excel表格制作
// 创建a标签e68a84e8a2ad7a64334模拟下载
function exportExcel(params, filename) {
return $http({
url: '/api/exportExcel',
method: "POST",
headers: {
'Content-type': 'application/json'
},
params: params,
responseType: 'arraybuffer'
}).success(function (data) {
var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var objectUrl = URL.createObjectURL(blob);
var a = document.createElement('a');
document.body.appendChild(a);
a.setAttribute('style', 'display:none');
a.setAttribute('href', objectUrl);
a.setAttribute('download', filename);
a.click();
URL.revokeObjectURL(objectUrl);
});
}
我使用内置$http服务直接同外部进行通信$http服务简单封装浏览器原XMLHttpRequest象e69da5e6ba907a64339
1、链式调用
$http服务能接受参数函数参数象包含用HTTP请求
配置内容函数返promise象具successerror两
$http({
url:'data.json',
method:'GET'
}).success(function(data,header,config,status){
//响应功
}).error(function(data,header,config,status){
//处理响应失败
});
2、返promise象
var promise=$http({
method:'GET',
url:"data.json"
});
由于$http返promise象我响应返用then处理调
使用then特殊参数代表相应象功或失败信息接受两
选函数作参数或者使用successerror调代替
promise.then(function(resp){
//resp响应象
},function(resp){
//带错误信息resp
});
或者：
promise.success(function(data,status,config,headers){
//处理功响应
});
promise.error(function(data,status,hedaers,config){
//处理失败响应
});
then()与其两种主要区别接收完整响应象success()error()则响应
象进行析构
3、快捷get请求
①$http.get('/api/users.json');
get()返HttpPromise象
发送比：delete/head/jsonp/post/put 函数内接受参数具体参照148页
②再发送jsonp请求举例说明： 发送JSONP请求其url必须包含JSON_CALLBACK字
jsonp(url,config) 其config选
var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
4、$http做函数使用需要传入设置象用说明何构造XHR象
$http({
method:'GET',
url:'/api/users.json',
params:{
'username':'tan'
});
其设置象包含主要键：
①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
});
4、响应象
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
象用原始请求完整设置象
◇statusText（字符串）
字符串响应HTTP状态文本
5、缓存HTTP请求
默认情况$http服务请求进行本缓存发送单独请求我通向$http请求传入布尔值或者缓存实例启用缓存
$http.get('/api/users.json',{ cache: true })
.success(function(data) {})
.error(function(data) {});
第发送请求$http服务向/api/users.json发送GET请求第二发送同GET请求$http服务缓存取请求结真发送HTTP GET请求
例由于设置启用缓存AngularJS默认使用$cacheFactory,服务AngularJS启自创建
想要AngularJS使用缓存进行更自定义控制向请求传入自定义缓存实例代替true
post请求进度行跨域
angularjs内置封装了类ajax的网络服务知$http,所以实道现了依赖外部插件来完内成完整的前后端分离方案
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: '',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: ''
}
}).then(function success(result) {
//数据容请求成功
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};
post请求进行跨域
angularjs内置封装了类ajax的网络服务$http,所以实现了依赖外部插件来完成完整的前后端分离方案
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: '',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: ''
}
}).then(function success(result) {
//数据请求成功e799bee5baa6e58685e5aeb9339
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};
注意：表面上是向$http中传入了一个回调函数提供相应时调用，实际是返回了一个promise对象，angular1.2以上的版本对$http进行了优化
优化后：
$scope.main = {
getData: function () {
var myUrl = '';
var url = '';
var promise = $http({
method: 'POST',
url: url,
headers: {
'Content-Type' : 'text/plain'
},
data: {
myUrl: myUrl
}
});
console.log(promise);
//第一中写法
promise.then(function success(data) {
console.log(data);
},function error(err) {
console.log(err);
});
//第二种写法
promise.success(function (data) {
console.log(data);
});
promise.error(function (err) {
console.log(err);
});
}
};
当promise对象返回时，可以链式调用；也可以分开来操作
node服务器配置：
只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据，则数据类型(Content-Type)只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain中的一种。不会使用自定义请求头（类似于 X-Modified 这种）。
但请求以如果 GET, HEAD 或者 POST 以外的方法发起请求。或者，使用 POST，但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求或者使用自定义请求头（比如添加诸如 X-PINGOTHER）时，浏览器就需要向服务器发送预请求，以确定服务器是否支持后续请求，如果支持，浏览器则继续发送后续Ajax请求
//http对象,通过他可以创建服务器,设置端口号...
var http = require('http');
//url对象,可以解析url中的内容
var url = require('url');
//查询参数对象,处理查询参数
var ql = require('querystring');
var server = http.createServer(function (request,response) {
//设置编码格式
request.setEncoding('UTF-8');
//允许跨域请求, * 代表接收任何请求
response.setHeader('Access-Control-Allow-Origin','*');
//接收前端发送的所有请求数据
var postData = '';
//监听,前端有数据,有就调用
request.addListener('data',function (data) {
postData += data;
});
//前端数据接收完毕
request.addListener('end',function () {
console.log('数据接收完毕');
//转化为JSON对象
var postDataObj = JSON.parse(postData);
console.log(postDataObj);
console.log([url,ql]);
//接收服务器请求别的服务器或借口返回的数据
var resultData = '';
http.get(postDataObj.myUrl,function (request) {
request.setEncoding('UTF-8');
//监听数据,有数据执行回调
request.on('data',function (result) {
resultData += result;
});
//接收完毕,相应给前端
request.on('end',function () {
response.end(resultData);
});
}).on('error',function (err) {
response.end(err);
});
});
});
server.listen(8000,function (err) {
if(!err){
console.log('服务器端口在8000');
}
})
angularjs请求：
$scope.main = {
getData: function () {
$http({
method: 'POST',
url: '',
headers: {
'Content-Type' : 'application/x-www-form-urlencoded'
},
data: {
myUrl: ''
}
}).then(function success(result) {
//数据请求成功
console.log(result.data);
},function error(err) {
//数据请求失败
console.log(err);
});
}
};