1. 程式人生 > >采用Post請求的方式提交參數並導出excel

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

我們 false 但是 限制 put 數據 lba bsp 翻轉

一般情況下,我們都是采用get請求的方式導出excel。例如采用如下方式:

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

導出excel所需的邏輯參數拼接到url上即可。

但是,如果我們需要提交大量的參數到後臺才能導出excel, 亦或者我們提交的參數中有中文,get提交亂碼了,那麽就可能想使用post提交的方式來導出excel。因為post提交支持更多的參數,從而能解決get提交對url長度的限制問題。

然而,一般的post提交表單,意味著主頁面也會一起刷新,體驗較差。那麽,這裏將提供一個仿異步post提交導出excel的實例。

代碼如下:

_export = {
        canExport:false,
        post:function(data,exportUrl) {
            _export.canExport = true;
            if ($(‘#exportIframe‘).length > 0) {
                $(‘#exportIframe‘).remove();
            }
            $(‘body‘).append(‘

‘);
            $(‘#exportIframe‘).load(function() {
                if (_export.canExport) {
                    var formData = ‘
‘; for (var name in data) { formData = formData + ‘‘; } formData = formData + ‘‘; formData = formData + ‘
‘;
                    $(this).contents().find(‘body‘).append(formData);
                    $(this).contents().find(‘#submitExportForm‘).click();
                    _export.canExport = false;
                }
            });
        }
}

調用方式:

_export.post(submitData,exportUrl);

註意,這裏的submitData是使用jquery構建key:value的form參數對象。傳入導出方法後被解析還原成form表單數據。

代碼的思路就是,利用隱藏的iframe內嵌模塊,在iframe內部post表單提交導出我們想要的數據,頁面翻轉也僅發生在iframe內部,

我們的主頁面並不會發生翻轉,從而達到仿異步post導出的效果。

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