Ajax 下载文件

最新推荐文章于 2024-11-19 11:33:31 发布

weixin_34214500

最新推荐文章于 2024-11-19 11:33:31 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： python json

原文链接：https://my.oschina.net/u/2260184/blog/630838

本文介绍了如何使用DOM动态操作及IFrame实现文件下载同时保持页面无刷新的方法。文章对比了使用Ajax与不使用Ajax的方式，详细阐述了通过创建表单提交流处理URL以实现文件下载的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

1. 使用ajax，ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的发送，接受都只能是string字符串，不能流类型，所以无法实现文件下载，强用会出现response冲突。如果非要使用ajax的话，只能通过返回值得到生成的文件相关url。然后在回调函数里通过创建一个iframe，并设置其src值为文件url，或者一个对文件生成流的处理url，这样操作来实现文件下载且页面无刷新。

2. 不使用ajax，通过dom动态操作或创建iframe,form的方式来实现，在下载文件的同时实现页面不刷新，其中iframe的src可以是文件地址url来直接下载文件，也可以是流处理url通过response流输出下载，form的是流处理url通过response流输出下载，dom动态操作的时候实现文件下载，且页面无刷新。要在下载的同时实现进度条的话，可以创建一个定时任务，每隔一定时间就向后台发送请求，通过公用的对象，比如session,来取得文件下载的处理进度。

            var title=$("input[name='gjzSelect']").val();
            var rqTime = $(".ui-datepicker-time").val();
            var ddd= rqTime.split("一");
            var startTime=ddd[0];
            var endTime=ddd[1];
            
            var form = $("<form>");   //定义一个form表单
            form.attr('style', 'display:none');   //在form表单中添加查询参数
            form.attr('target', '');
            form.attr('method', 'post');
            form.attr('action', "<%=basePath%>jiankong/madeExcel.do");
            
            var input1 = $('<input1>');
            input1.attr('type', 'hidden');
            input1.attr('name', 'startTime');
            input1.attr('value', startTime);
            
            var input2 = $('<input2>');
            input2.attr('type', 'hidden');
            input2.attr('name', 'endTime');
            input2.attr('value', endTime);
            
            var input3 = $('<input3>');
            input3.attr('type', 'hidden');
            input3.attr('name', 'title');
            input3.attr('value', title);
            
            $('body').append(form);  //将表单放置在web中
            form.append(input1);   //将查询参数控件提交到表单上
            form.append(input2);
            form.append(input3);
            form.submit();

        <%-- 
        $.ajax({
            url:'<%=basePath%>jiankong/madeExcel.do',
            cache:false,
            data:{
                    'startTime':startTime,
                    'endTime':endTime,
                    'title' :title
                  },
            error:function (e){
                alert("导出失败！");
            },
            success:function (data){
                 alert("导出成功！");
            }   
        }); 
        --%>

转载于:https://my.oschina.net/u/2260184/blog/630838