jQuery Ajax请求下载文件资源
最近遇到这样一个问题,后端用Scala结合Play框架,前端jQuery+Bootstrap, 需求是这样的,其实跟SO上的这个问题一样, 根据Ajax的Post请求要求server端或者直接返回Json数据或者直接返回可以下载的file文件。搜索了下问题,貌似单独一次ajax请求搞不定。
解决方案大同小异,但都是通过发请求两次;
server端逻辑不变
server端逻辑不变,client根据server的返回判断再次post可以download的file。server端直接返回的是file,ajax请求的返回的时候再通过一样的form隐藏表单请求一次;Handle file download from ajax post Server端:
if request is json Ok(json) else Ok.sendFile(File)
当是filedownload的请求时,response的header如下:
Content-Disposition:attachment; filename="15_08_23-11_02_57_3227832721122260226064.csv" Content-Length:4388 Content-Type:text/csv
client端:
var url = "/tool/query"; $.ajax({ url: url, type: "POST", data: params, success: function(response, status, request){ var disp = request.getResponseHeader('Content-Disposition'); if (disp && disp.search('attachment') != -1) { var form = $('<form method="POST" action="' + url + '">'); $.each(params, function(k, v) { form.append($('<input type="hidden" name="' + k + '" value="' + v + '">')); }); form.appendTo('body').submit().remove(); return; } if(response.status == "ok"){ showResult(response.data); }else{ showError('Error: ', response.msg); } } })
确实是请求了两次,返回了两次file的内容,增大了带宽等负担,实测chrome,第一次response返回了实际的数据,第二次请求不是ajax请求,浏览器弹框保存文件,juery有log信息Resource interpreted as Document but transferred with MIME type text/csv:;好处client的请求不变,仅仅将Ajax请求改为不通过的form请求,server端处理简单,不需要改变,只需要一个action即可。其实再加个标记可以防止server发回两次数据的。
server端逻辑改变
server端在第一次请求的时候不直接返回file,而是返回一个url,该url可以获取文件,通过iframe的方式再请求一次,然后iframe的src指向最新的资源(可以是直接如上得file资源);或者直接用一个get请求去下载文件。 同样是请求了两次,第一次仅仅返回一个url(不管这个url是直接返回的file content还是说get请求),第二次才返回真正的file内容,带宽较少,但server端需要有两个action进行处理。
Reference:
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46524)
- 分享一个JQUERY颜色选择插件 (阅读:12657)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9689)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7758)
- jQuery的data()方法 (阅读:7590)
- jQuery性能优化指南 (阅读:7334)
- jQuery Color Animations颜色动画插件 (阅读:7094)
- 精于图片处理的10款jQuery插件 (阅读:6229)
- jQuery中getJSON跨域原理详解 (阅读:5623)
- 配合jquery实现异步加载页面元素 (阅读:5377)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:tanglei 来源: tanglei's blog|唐磊的个人博客
- 标签: Ajax jQuery 下载
- 发布时间:2016-02-10 22:46:37
- [46] 界面设计速成
- [42] Oracle MTS模式下 进程地址与会话信
- [41] 视觉调整-设计师 vs. 逻辑
- [40] IOS安全–浅谈关于IOS加固的几种方法
- [39] android 开发入门
- [38] 图书馆的世界纪录
- [38] 如何拿下简短的域名
- [37] 程序员技术练级攻略
- [37] 【社会化设计】自我(self)部分――欢迎区
- [34] 读书笔记-壹百度:百度十年千倍的29条法则