采用Post請求的方式提交參數並導出excel

一般情況下，我們都是采用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