使用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请求代码示例:
2、POST请求示例:
POST请求-Form表单提交:
POST请求-单个/多个文件,文件组上传:
POST请求-提交二进制流:
POST请求-提交文件流:
POST请求-Multipart-Data,文件和文本字段一起提交:
POST请求-显示上传进度:
除此以外,put、delete、head等方式请求使用方式大同小异,在此不做详细叙述。
下面简单介绍各种类型请求的代码:
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等方式请求使用方式大同小异,在此不做详细叙述。
相关文章推荐
- 使用APICloud编写优雅的HTML5代码《二》:ajax、文件上传
- 使用APICloud编写优雅的HTML5代码《一》:下拉刷新、上拉加载更多
- 使用APICloud编写优雅的HTML5代码《一》:下拉刷新、上拉加载更多
- 使用FormData进行Ajax请求上传文件的实例代码
- JavaScript使用Ajax上传文件的示例代码
- html5里使用ajax提交含有上传文件的form表单
- MVC5:使用Ajax和HTML5实现文件上传功能
- MVC5:使用Ajax和HTML5实现文件上传功能
- Spring学习第三天——Spring MVC,使用注解方式,intellij的代码说明,ajax,文件的上传下载
- 使用Ajax+Iframe 实现无刷新文件上传
- 使用Asp.Net2.0,编写类似GMail的文件上传系统(翻译)
- AjaxFileUpLoad 文件异步上传Demo(模仿官方网站,后台使用.net一般处理程序)
- Asp.net使用ajax无刷新上传文件(附源码)
- Asp.net使用ajax无刷新上传文件(附源码)
- Asp.net使用ajax无刷新上传文件(附源码)
- ajax文件上传核心代码
- (转)使用CGIC实现Web文件上传的服务端代码
- AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页
- Asp.Net Mvc使用Ajax.BeginForm上传文件Request.Files始终为empty
- AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页