说明: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. Linux TCP/IP 协议栈之 Socket 的实现分析(一)

    内核版本:2.6.37参考[作者:kendo的文章(基于内涵版本2.6.12)] 第一部份 Socket套接字的创建 socket 并不是 TCP/IP协议的一部份. 从广义上来讲,socket 是U ...

  2. WebFrom模拟MVC

    如:  aspx前台     这样写生成页面时不会产生新的html标签,用控件则会产生新的html标签 <h1><%= title %></h1> <p> ...

  3. .NET(C#):分析IL中的if-else,while和for语句并用Emit实现

    这是一篇关于IL和反射Emit的文章(所以不喜欢IL或者Emit的就没必要往下看了),要求读者对IL和Emit工作原理较了解.所有分析IL均在Visual Studio 2010 SP1下编译生成.( ...

  4. [置顶] Android项目组织和代码重用

    在Android应用开发过程中,只要涉及两个或以上人的开发,就需要考虑分工和代码的组织和重用问题. 代码重用有三种方式: 1.APK: 2.JAR:通过Libs/ 和Build path集成,缺点是不 ...

  5. C++菱形继承的构造函数

    网上搜了很多,大多是关于菱形虚继承的构造函数应该怎么写,或者就是最简单的,四个类都不带参数的构造函数. 本文旨在记录一下困扰了博主1h的问题,非常浅显,有帮助固然好,如果侮辱谁的智商还见谅,当然无限欢 ...

  6. hbase学习笔记-----REST客户端

    1. 启动REST服务 a.启动一个非守护进程模式的REST服务器(ctrl+c 终止) bin/hbase rest start b.启动守护进程模式的REST服务器 bin/hbase-daemo ...

  7. 值栈和OGNL 之 7.1 值栈

    7.1  值栈 7.1.1  值栈是什么 简单的说:值栈是对应每一个请求对象的轻量级的内存数据中心. Struts2中一个很激动人心的特性就是引入了值栈,在这里统一管理着数据,供Action.Resu ...

  8. struts2 的struts.xml配置详解

    在应用struts框架进行开发时,必不可少的一步就是对struts.xml进行配置,对于该文件了解越多,我们开发起一应用程序定会更加顺手.下面我们看一下struts.xml的内容,每一项都有什么作用. ...

  9. 8、Khala的设备间管理+通信

    在之前的文档中,我们都是从单个设备的角度进行介绍,但在实际业务中,不同设备间存在交互行为.我们经常需要在一个设备的生命周期中查询另一个设备信息,或者向另一个设备进行通信.因此我们提供了设备管理模块来对 ...

  10. 指针参数的传递(节选 C++/C 高质量编程 林锐)

    指针参数是如何传递内存的 如果函数的参数是一个指针,不要指望用该指针去申请动态内存.示例7-4-1中,Test函数的语句GetMemory(str, 200)并没有使str获得期望的内存,str依旧是 ...