巨坑，前端ajax上传文件然后下载目标文件遇到的问题

这篇博文主要是想记录一下，今天在实现需求，修改bug的时候，遇到的几个关键的问题。

ajax请求自动刷新页面，重新刷新了js，js内保存的服务器返回的变量丢失。
SpringMVC的response对象返回要下载的文件流，浏览器不会弹出窗口自动下载（下载机制未被激活）。

ajax自动刷新页面

前端关键代码：

<form>
    <input type="submit" name="report_view" id="report_view" value="报告生成"  onclick="GeneReportInfoDlg.generate()" />
</form>

主要逻辑就是点击按钮触发点击事件，执行js方法,generate();

JS代码：

generate=function(){
    $.ajax({
        url: Feng.ctxPath+ "/geneReport/reportGenerate",
        type: 'POST',
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success:function(downloadUrl){
            lay.msg("报告生成成功！");//lay是layer前端弹出层框架的方法
        },
        error:function (data) {
            lay.msg("报告生成发生错误！");
        }
    });
};

逻辑是没有问题的，但是generate方法执行后，后天返回状态码，ajax的回调方法执行完毕，会刷新前端页面。这就是关键的问题

解决办法

修改前端代码，将中的type，改为button。这种type为submit的写法，之前在传统的表单提交中我们经常使用。但是通过传统方式提交表单，就是会刷新页面的。另外还有一点，传统提交方式在<form>标签中也有体现，注意在代码中不要出现像这样的代码：

<form id="test" action="http:localhost:8080/dir/file.txt" method="post" enctype="multipart/form-data"></form>

激活浏览器的下载机制，让浏览器打开保存文件的那个窗口

使用jquery创建表单并提交，实现激活

var form = $("<form>");
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");
form.attr("action",rootPath + "T_academic_essay/DownloadZipFile.do");
var input1 = $("<input>");
input1.attr("type","hidden");
input1.attr("name","strZipPath");
input1.attr("value",strZipPath);
$("body").append(form);
form.append(input1);
form.submit();
form.remove();

直接使用a标签激活

<a href="http:localhost:8080/dir/file.txt">点击下载</a>

使用隐藏的iframe或者新窗体，激活下载

try {
               var elemIF = document.createElement("iframe");
               elemIF.src = Feng.ctxPath + "/geneReport/download?downloadUrl="+downloadUrl;
               elemIF.style.display = "none";
               document.body.appendChild(elemIF);
           } catch (e) {
    }

注意这两点，文件可以流畅地上传下载。