window.open() POST 方式提交json数据，以及后台的json序列化为对象

最新推荐文章于 2023-07-13 16:58:02 发布

cumt_cx

最新推荐文章于 2023-07-13 16:58:02 发布

阅读量8.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架之-------Extjs4 文章标签： poi 报表 window.open json post

本文链接：https://blog.youkuaiyun.com/cumt_cx/article/details/56276140

前端框架之-------Extjs4 专栏收录该内容

6 篇文章

订阅专栏

在处理复杂的导出报表时，使用window.open()配合POST方式来提交JSON数据是一种解决方案。当需要传递复杂的JSON参数或动态增加的JSONList时，GET方式可能不合适。本文介绍了如何在前端通过window.open()进行POST提交，并展示了后台如何解析这些参数。主要涉及的技术包括poi框架和JSON处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在导出时候，ajax实现并不好处理，可以选择用window.open()的方式，后台框架选择poi或者jxl即可，若不是太过复杂的导出选择jxls模板的方式最为方便。

但在处理复杂的导出报表时候我选择是用poi框架写调用poiAPI的方式实现。window.open()传递固定参数或者简单参数时候使用get即默认的方式即可。但若是需要传递比较复杂的json参数，或者是jsonList的参数，并且参数不定时候，用get方式并不好构造参数而且很可能会超出url的长度范围，需要使用post的方式去提交,例如需要传递的参数如下，并且jsonList的数据可以动态增加

[{
		"fieldFormat" : "STRING",
		"operator" : "IS_NOT",
		"specialField" : "status",
		"values" : ["DRAFT"]
	}, {
		"operator" : "LESS_THAN",
		"fieldFormat" : "DATE",
		"specialField" : "happened_time",
		"values" : ["2017-02-21T00:00:00"]
	}, {
		"operator" : "LESS_THAN_EQUAL",
		"fieldFormat" : "DATE",
		"specialField" : "opinion_time",
		"values" : ["2017-02-21T23:59:59"]
	}, {
		"specialField" : "confirm_time",
		"fieldFormat" : "DATE",
		"values" : ["2017-02-21T23:59:59"],
		"operator" : "LESS_THAN_EQUAL"
	}, {
		"operator" : "GREATER_THAN_EQUAL",
		"fieldFormat" : "DATE",
		"specialField" : "confirm_time",
		"values" : ["2017-02-14T00:00:00"]
	}, {
		"operator" : "IS",
		"fieldFormat" : "STRING",
		"specialField" : "status",
		"values" : ["SUBMIT"]
	}
]

直接上前端window.open()代码

{
                xtype : 'button',
                text: '导出',
                width: 100,
                style: 'margin-left:40px',
                handler: function(){
                    me.exportEventContent();
                }
            }

导出函数，使用form的submit模拟window.open()方式提交

    exportEventContent: function (){
        var me  = this;
        var url = _selfUrl; //需要去进行访问的url
        var predictions = me.getSearchPredicate();
        me.openNewPost('POST',url,predictions,"_blank");
    }

    // Arguments :
    //  verb : 'GET'|'POST'
    //  target : an optional opening target (a name, or "_blank"), defaults to "_self"
    openNewPost: function(verb, url, data, target) {
        var form = document.createElement("form");
        form.action = url;
        form.method = verb;
        form.target = target || "_self";
        if (data) {
            for (var key in data) {
                var input = document.createElement("textarea");
                input.name = key;
                input.value = typeof data[key] === "object" ? JSON.stringify(data[key]) : data[key];
                form.appendChild(input);
            }
        }
        form.style.display = 'none';
        form.enctype='application/json';
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }

实际去访问url时，传递的参数如下：

后台解析传参代码

@ RequestMapping( value = "/exportExcel" )
public void exportExcel( HttpServletRequest request, HttpServletResponse response ) throws ParseException, IOException
{
	List < ObjectTmp > objectTmps= jsonStrToBeanList( request );
}


public static List < ObjectTmp > jsonStrToBeanList( HttpServletRequest request ) throws ParseException
{
	List < ObjectTmp >	resultList	= new ArrayList < ObjectTmp > ();
	int			i		= 0;
	while ( request.getParameter( i + "" ) != null )
	{
		JSONObject	jsonObject	= JSONObject.fromObject( request.getParameter( i + "" ) );
		ObjectTmp	tmp		= (ObjectTmp) JSONObject.toBean( jsonObject, ObjectTmp.class );
		resultList.add( tmp );
		i++;
	}

	return(resultList);
}