您的位置:首页 > Web前端 > HTML5

使用APICloud编写优雅的HTML5代码《二》:ajax、文件上传

2017-08-05 17:21 411 查看
摘要: 对于ajax这个API而言,它实际上是有非常多的参数可供开发者选择的,以此满足各种特殊的需求,包括:url、method、cache、timeout、dataType、charset、headers、report、returnAll、data等等,用户可以根据实际情况,结合使用这些参数,来完成非常多的需求,如通常的访问WebService接口获取数据(GET)、提交表单(POST)、上传文件、下载文件等。一个简单的API却包含了非常强大的功能。

下面简单介绍各种类型请求的代码:

1、GET请求代码示例:

api.ajax({
url:'http://m.weather.com.cn/data/101010100.html'    //天气预报网站的WebService接口
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});


2、POST请求示例:

POST请求-Form表单提交:

api.ajax({
url: 'http://www.xxx.com/path/form',
method: 'post',
dataType: 'text',     //该参数若不传,则默认为json
data: {
values:{name: 'devlp', password: '123456'}       //键值对
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});


POST请求-单个/多个文件,文件组上传:

api.ajax({
url: 'http://www.xxx.com/path/upLoad',
method: 'post',
data: {
files:{myfile: 'filepath'}
// filepath来自ios或者Android的文件系统中的任意文件。可设置多个文件,甚至是文件数组,如files:{myfile: 'filepath', myfile1: 'filepath1'}或者files:{'myfile[]': ['filepath', 'filepath1']}等
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});


POST请求-提交二进制流:

api.ajax({
url: 'http://www.xxx.com/path/body',
method: 'post',
data: {
body:'textbits'
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});


POST请求-提交文件流:

api.ajax({
url: 'http://www.xxx.com/path/body',
method: 'post',
data: {
stream:'filepath'
// filepath来自ios或者Android的文件系统中的任意文件
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});


POST请求-Multipart-Data,文件和文本字段一起提交:

api.ajax({
url: 'http://www.xxx.com/path/multipart',
method: 'post',
data: {
values:{name: 'devlp', password: '123456'},
files:{file: 'fs://test.png'}
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});


POST请求-显示上传进度:

api.ajax({
url: 'http://www.xxx.com/path/multipart',
method: 'post',
report: true,
data: {
values:{name: 'devlp', password: '123456'},
files:{file: 'fs://test.png'}
}
},function(ret,err){
if(ret){
if(0 == ret.status){
//loading('进度:' + ret.progress);
}else{
api.alert({msg:'上传成功:\n' + JSON.stringify(ret)});
}
}else{
api.alert({msg:JSON.stringify(err)});
}
});


除此以外,put、delete、head等方式请求使用方式大同小异,在此不做详细叙述。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ajax html5 api 上传文件