一般情况下,我们都是采用get请求的方式导出excel。例如采用如下方式:

var exportUrl = '/xxx;';
window.open(exportUrl);

导出excel所需的逻辑参数拼接到url上即可。

但是,如果我们需要提交大量的参数到后台才能导出excel, 亦或者我们提交的参数中有中文,get提交乱码了,那么就可能想使用post提交的方式来导出excel。因为post提交支持更多的参数,从而能解决get提交对url长度的限制问题。

然而,一般的post提交表单,意味着主页面也会一起刷新,体验较差。那么,这里将提供一个仿异步post提交导出excel的实例。

代码如下:

  1. _export =
  2. canExport:false,
  3. post:function(data,exportUrl){
  4. _export.canExport =true;
  5. if($('#exportIframe').length >0){
  6. $('#exportIframe').remove();
  7. }
  8. $('body').append('<iframe id="exportIframe" width="0" height="0" src="'+domain+'/export"></iframe>');
  9. $('#exportIframe').load(function(){
  10. if(_export.canExport){
  11. var formData ='<form method="post" action='+exportUrl+' >';
  12. for(var name in data){
  13. formData = formData +'<input type="text" name="'+name+'" value="'+data[name]+'" />';
  14. }
  15. formData = formData +'<input type="submit" id="submitExportForm"/>';
  16. formData = formData +'</form>';
  17. $(this).contents().find('body').append(formData);
  18. $(this).contents().find('#submitExportForm').click();
  19. _export.canExport =false;
  20. }
  21. });
  22. }
  23. }

调用方式:

_export.post(submitData,exportUrl);

注意,这里的submitData是使用jquery构建key:value的form参数对象。传入导出方法后被解析还原成form表单数据。

代码的思路就是,利用隐藏的iframe内嵌模块,在iframe内部post表单提交导出我们想要的数据,页面翻转也仅发生在iframe内部,

我们的主页面并不会发生翻转,从而达到仿异步post导出的效果。

链接:  http://www.everycoding.com/coding/302.html

采用Post请求的方式提交参数并导出excel的更多相关文章

  1. 黎活明8天快速掌握android视频教程--27_网络通信之通过GET和POST方式提交参数给web应用

    1该项目主要实现Android客户端以get的方式或者post的方式向java web服务器提交参数 Android客户端通过get方式或者post方式将参数提交给后台服务器,后台服务器对收到的参数进 ...

  2. js replace 全局替换 以表单的方式提交参数 判断是否为ie浏览器 将jquery.qqFace.js表情转换成微信的字符码 手机端省市区联动 新字体引用本地运行可以获得,放到服务器上报404 C#提取html中的汉字 MVC几种找不到资源的解决方式 使用Windows服务定时去执行一个方法的三种方式

    js replace 全局替换   js 的replace 默认替换只替换第一个匹配的字符,如果字符串有超过两个以上的对应字符就无法进行替换,这时候就要进行一点操作,进行全部替换. <scrip ...

  3. node.js 下依赖Express 实现post 4种方式提交参数

    上面这个图好有意思啊,哈哈, v8威武啊.... 在2014年的最后一天和大家分享关于node.js 如何提交4种格式的post数据. 上上一篇说到了关于http协议里定义的4种常见数据的post方法 ...

  4. POI导出Excel不弹出保存提示_通过ajax异步请求(post)到后台通过POI导出Excel

    实现导出excel的思路是:前端通过ajax的post请求,到后台处理数据,然后把流文件响应到客户端,供客户端下载 文件下载方法如下: public static boolean downloadLo ...

  5. Android传统HTTP请求get----post方式提交数据(包括乱码问题)

    1.模仿登入页面显示(使用传统方式是面向过程的) 使用Apache公司提供的HttpClient  API是面向对象的 (文章底部含有源码的连接,包括了使用async框架) (解决中文乱码的问题.主要 ...

  6. vuejs vue-resource post方式提交参数PHP $_POST获取不到

  7. android向web提交参数的4种方式总结,附带网站案例源码

    第一种:基于http协议通过get方式提交参数 1.对多个参数的封装 public static String get_save(String name, String phone) { /** * ...

  8. 超链接实现post方式提交

    思路:如果想要超链接实现post方式提交,必须借助表单.下面得两种方式,一种是借助显示的form表单,一种是借助隐式的form表单方式一:将超链接放到一个form表单中,或者超链接本身就在一个form ...

  9. 导出excel时,以form方式提交json数据

    今天在写项目时写到一个excel的导出,开始想用ajax请求后台后导出,但发现ajax会有返回值,而且ajax无法直接输出文件,而后台的excel导出方法已经封装好,不方便修改. 就改用了提交的方式f ...

随机推荐

  1. JS替换地址栏参数值

    首先,页面引入JS代码片段(整体复制粘贴即可): var Query=function(a){"use strict";var b=function(a){var b=[],c,d ...

  2. 蓝牙4.0 BLE入门

    在BLE协议中有两个角色,一个是周边(Periphery),另外一个是中央(Central).一个中央可以同时连接多个周边,但一个周边某一时刻只能连接一个中央.但是不管periphery还是centr ...

  3. 阿里云mysql数据库设置让公网访问客户端访问

    第一步 首先使用root登入你的mysql ./mysql -u root -p 你的密码 第二步 备注:也可以添加一个用户名为yuancheng,密码为123456,权限为%(表示任意ip都能连接) ...

  4. c++ STL 常用容器元素类型相关限制 指针 引用

    c++ 的 STL 中主要有 vector , list, map, set  , multimap,multiset 这些容器完全支持使用内置类型和指针(指针注意内存泄露问题). 就是说乱用智能指针 ...

  5. oracle字符集查看、修改、版本查看

    .1.先查服务端的字符集   或者 2.再查客户端的字符集 两个字符集(不是语言)一致的话就不会乱码了   详细资料 一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有 ...

  6. XSS注入常用语句

    <script>alert('hello,gaga!');</script> //经典语句,哈哈! >"'><img src="javas ...

  7. j-linkV8固件更新(任意版本)

    在使用j-link v8调试程序时,容易出现固件丢失或出错的情况,导致电脑不能识别,j-link上面的灯不亮.我今天刚刚遇到了这个情况,于是就拆开外壳,在网上搜索资料,发现刷固件相关的还真多,但是有一 ...

  8. Small Private Cloud Deployment Solution

    项目背景 为用户提供可访问的桌面虚拟机,方便软件研发人员日常办公,软件开发,编译等工作.主要操作包括Visor制图.程序开发测试以及使用office软件办公. 目前阶段需要支持100台虚拟机(4VCP ...

  9. 记录一下mariadb设置主从同步的过程[虚拟机测试]

    背景:因为工作的关系,需要找寻实时同步数据到另外系统的服务器的数据库上,查询下来,用mariadb进行跨服务器的同步数据动作,用主从同步比较多,也比较保险 也有使用shell脚本的,定时定候的执行my ...

  10. css-css背景

    CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 一:背景色background-color 属性 p {background-color: gray;} 二:背景图像 backgr ...