说明:Ajax是无法实现文件传输的,本文只是模拟了Ajax不刷新页面就可以请求并返回数据的效果。实质上还是通过提交form表单来返回文件流的输出。

分步实现逻辑:

  1. ajax请求服务器,访问数据库,根据查询到的数据生成一个数据文件,返回前台一个json对象(可放置生成成功标记,文件路径等信息)。
  2. ajax success回调函数部分,根据返回的json对象,调用手写的js下载文件的方法,实现页面无刷新下载文件。

贴上部分代码供参考:

js代码:

1. js写一个动态创建并提交form表单的方法,依赖于jQuery插件。

// 文件下载
jQuery.download = function(url, method, filedir, filename){
jQuery('<form action="'+url+'" method="'+(method||'post')+'">' + // action请求路径及推送方法
'<input type="text" name="filedir" value="'+filedir+'"/>' + // 文件路径
'<input type="text" name="filename" value="'+filename+'"/>' + // 文件名称
'</form>')
.appendTo('body').submit().remove();
};

2. 查询数据,输出到文件,保存到服务器,并调用download方法实现下载

// 查询数据,输出到文件,保存到服务器,并实现下载
function exportOilDetection() {
var ids = ['1','2','3','4']; // 查询参数代表(可根据实际情况修改),需要导出数据的id
$.ajax({
type : 'POST',
dataType : 'json',
async : false,
url : "${pageContext.request.contextPath}/oilDetectionAction!ajaxExportOilDetectionInfos.action", // 生成文件,保存在服务器
data : {
ids : ids,
},
success : function(data) {
var result = data["data"];
if (result[0] == "success") {
// result[0] -- 文件生成成功标记
// result[1] -- 路径
// result[2] -- 文件名称
$.download('oilDetectionAction!ajaxDownloadDataExcel.action', 'post', result[1], result[2]); // 下载文件
} else {
alert("数据导出失败!");
}
},
error : function(XMLHttpRequest, textStatus, e) {
console.log("oilDetection.js method exportOilDetection" + e);
}
});
}

action文件配置

  • ajax生成文件后,会返回json类型结果
        <action name="oilDetectionAction" class="oilDetectionAction">
<result name="ajax" type="json">
<param name="root">result</param>
</result>
<result name="success">/page/oilDetection.jsp</result>
</action>

java代码:

  • 返回文件流需借助response对象,所以action类需要实现ServletResponseAware接口,并声明response对象自动注入
public class OilDetectionAction implements ServletResponseAware {

    HttpServletResponse response;

    /**
* 自动注入response
*/
public void setServletResponse(HttpServletResponse response) {
this.response = response;
} ....
}
  • 下载文件部分代码:
public class OilDetectionAction implements ServletResponseAware {

     ....

    /**
* 将生成的文件网络传输到客户端
*/
public void ajaxDownloadDataExcel() throws IOException {
InputStream ins = null;
BufferedInputStream bins = null;
OutputStream outs = null;
BufferedOutputStream bouts = null;
String file_name = getRequest().getParameter("file_name").trim(); // 文件名
String file_dir = getRequest().getParameter("file_dir").trim(); // 文件路径
System.out.println("获取到文件路径:" + file_dir + File.separator + file_name);
try {
if (!"".equals(file_name)) {
File file = new File(file_dir + File.separator + file_name);
if (file.exists()) {
ins = new FileInputStream(file_dir + File.separator
+ file_name);
bins = new BufferedInputStream(ins);
outs = response.getOutputStream();
bouts = new BufferedOutputStream(outs);
response.setContentType("application/x-download");
response.setHeader(
"Content-disposition",
"attachment;filename="
+ URLEncoder.encode(file_name, "UTF-8"));
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = bins.read(buffer, 0, 8192)) != -1) {
bouts.write(buffer, 0, bytesRead);
}
bouts.flush();
} else {
throw new Exception("下载的文件不存在!");
}
} else {
throw new Exception("导出文件时发生错误!");
}
} catch (Exception e) {
log.error(e.getMessage(), e);
} finally {
if (null != ins) {
ins.close();
}
if (null != bins) {
bins.close();
}
if (null != outs) {
outs.close();
}
if (null != bouts) {
bouts.close();
}
}
}
}

Ajax下载文件(页面无刷新)的更多相关文章

  1. Ajax技术实现页面无刷新跳转

    Ajax实现无刷新显示新的页面 <!DOCTYPE html> <html> <head> <script src="/jquery/jquery- ...

  2. 浅谈页面无刷新技术ajax

    现在一般网站都是用ajax来实现页面无刷新操作的. 什么是无刷新:ajax可以实现页面与后台的数据交互,用户完全感觉不出页面有任何的刷新,这就是AJAX的无刷新. ajax方法实现: 可以对ajax进 ...

  3. 基于jQuery的ajax系列之用FormData实现页面无刷新上传

    接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...

  4. HTTP与AJAX深入揭秘,不使用AJAX实现页面无刷新

    AJAX的原理是什么? 实际上就是发起HTTP请求,既然就是发起HTTP请求,那只要我们能够实现发起HTTP请求就可以在不使用AJAX的情况下实现相同的效果. 在前端有好多方式可以发起HTTP请求,比 ...

  5. 使用ajax和history.pushState无刷新改变页面URL onpopstate(转)

    Javascript代码 var htmlData1 = $.ajax(    {    url: "/getXXXResponse",    async: false }).re ...

  6. JQuery 实现页面无刷新

    对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...

  7. ajax 下载文件

    原本现在文件直接通过超链接可以完成下载,但现在要在url中附带几个参数,并且这些参数要是点击事件触发时的最新值,所以这里使用ajax的方式进行下载 然而: 1.使用ajax,ajax的返回值类型是js ...

  8. 页面无刷新Upload File

    页面无刷新Upload File. 利用jquery.form.js的ajaxForm提交文件. 具体参考以下代码: 前台html <%@ Page Language="C#" ...

  9. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

随机推荐

  1. STS(Spring Tool Suite)使用前准备

    sts 的基础框架拿的eclipse的,你可以理解为eclipse + spring插件的高级升华版.在使用上可以很大限度的参考eclipse的操作. 首先,调整字体. 中文很麻烦的,因为编码问题.习 ...

  2. redis简单配置

    由于前段时间使用Kestrel,同时要操作Memcached及时更新缓存,又要操作database,持久化数据. 貌似Redis既可以当Cache又可以当Queue!于是,今天开始研究Redis! 一 ...

  3. BZOJ 2733 HNOI 2012 永无乡 平衡树启示式合并

    题目大意:有一些岛屿,一開始由一些无向边连接. 后来也有不断的无向边增加,每个岛屿有个一独一无二的重要度,问随意时刻的与一个岛屿联通的全部岛中重要度第k大的岛的编号是什么. 思路:首先连通性一定要用并 ...

  4. [置顶] LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句

    LOAD语句:利用MSSQL中的xp_cmdshell功能,将指定文件夹下的指定文件,生成mysql的LOAD语句 declare @sql varchar(4000), @dirpath varch ...

  5. Android应用程序注冊广播接收器(registerReceiver)的过程分析

    前面我们介绍了Android系统的广播机制,从本质来说,它是一种消息订阅/公布机制,因此,使用这样的消息驱动模型的第一步便是订阅消息:而对Android应用程序来说,订阅消息事实上就是注冊广播接收器, ...

  6. [Python笔记][第四章Python正则表达式]

    2016/1/28学习内容 第四章 Python字符串与正则表达式之正则表达式 正则表达式是字符串处理的有力工具和技术,正则表达式使用预定义的特定模式去匹配一类具有共同特征的字符串,主要用于字符串处理 ...

  7. Android 使用开源xUtils来实现多线程下载(非原创)

    1.程序员自己也是可以实现多线程下载的,只是代码量比较大,而且,其中有许多细节需要考虑到,在GitHub上有人写好的代码,我们可以拿过来使用下,节省了我们开发程序的时间 2.导包:xUtils-2.6 ...

  8. 数学期望和概率DP题目泛做(为了对应AD的课件)

    题1: Uva 1636 Headshot 题目大意: 给出一个000111序列,注意实际上是环状的.问是0出现的概率大,还是当前是0,下一个还是0的概率大. 问题比较简单,注意比较大小: A/C & ...

  9. 对boost::shared_from_this的进一步封装

    对boost::shared_from_this的进一步封装 熟悉异步编程的同学可能会对boost::shared_from_this有所了解.我们在传入回调的时候,通常会想要其带上当前类对象的上下文 ...

  10. C++中const

    [const] 0.普通const对象定义在栈空间中 { ; ; cout << &a << ' ' << &b; } Result: 0x22ab ...