window.open实现post方式复杂参数传递

一、需求分析

最近在项目中，有个导出word的需求，但是需要传递一些复杂的参数到后端进行数据查询后再进行导出，需要使用window.open()方法实现。如果是简单参数并且参数不重要的话，可以使用get方式直接在url上进行参数拼接，然后后台直接获取即可。但是目前我需要传递的参数有好几个，并且还有一些是序列化后的json等等，有可能会超长。这个时候如果是使用get方式的话，就可能会存在一些问题。因为get方式请求有长度限制，并且url中如果包含非法字符的话，会报错。

由此，我改为了使用post放在在window.open打开新窗口的时候，将所有参数都传递到后端服务。

GET方式：直接在url上面进行拼接

window.open(window.baseUrl + "/xxxx?name=" + name + "&age=" + age

二、实现方式

一般网页的post都是通过form来实现的，所以这里以模拟form表单提交，创建一些隐藏域存放需要传递的参数，然后手动触发form的onSubmit监听事件，将form的target设置成和open的name参数一样的值，通过浏览器自动识别实现了将内容post到新窗口中。

具体代码如下：（笔者使用的是react）

//导出
exportPreviewEvaluationForm = () => {//....省略一些代码const {currentHjId, currentXsid, currentTaskId, currentLcid, currentXsxm} = this.props;this.downloadWord(window.baseUrl + "/xxxxxxx", currentTaskId, currentXsid, currentHjId, currentLcid, currentXsxm, previewFormDetail, cpxIdArr.toString(), "_blank")
};//创建隐藏表单Input域
createHideInput = (name, value) => {let hideInput = document.createElement("input");hideInput.type = "hidden";hideInput.name = name;hideInput.value = value;return hideInput;
};downloadWord = (url, rwid, xsid, hjid, lcid, xm, cpxqxx, cpxIdArr, name) => {let hideSubmitForm = document.createElement("form");hideSubmitForm.id = "tempForm1";hideSubmitForm.method = "post";hideSubmitForm.action = url;hideSubmitForm.target = name;hideSubmitForm.appendChild(this.createHideInput("rwid", rwid));hideSubmitForm.appendChild(this.createHideInput("hjid", hjid));hideSubmitForm.appendChild(this.createHideInput("lcid", lcid));hideSubmitForm.appendChild(this.createHideInput("xsid", xsid));hideSubmitForm.appendChild(this.createHideInput("xm", xm));hideSubmitForm.appendChild(this.createHideInput("cpxqxx", cpxqxx));hideSubmitForm.appendChild(this.createHideInput("cpxids", cpxIdArr));hideSubmitForm.addEventListener('onsubmit', () => {this.openDownloadWindow(name);});document.body.appendChild(hideSubmitForm);hideSubmitForm.submit();document.body.removeChild(hideSubmitForm);
};openDownloadWindow = (name) => {window.open('about:blank', name, 'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes');
};

后端接收：

// 1. 获取导出需要的一些参数
String xsid = request.getParameter("xsid");
String rwid = request.getParameter("rwid");
String hjid = request.getParameter("hjid");
String lcid = request.getParameter("lcid");
String cpxqxx = request.getParameter("cpxqxx");
String xm = request.getParameter("xm");
String cpxIds = request.getParameter("cpxids");

这样就实现了post方式传递复杂参数。

window.open实现post方式复杂参数传递相关推荐

【Window】线程同步方式1——临界区（关键代码段）
第一节:[Window]创建线程的3种方式第二节:[Window]线程同步概述第三节:[Window]线程同步方式1--临界区(关键代码段) 第四节:[Window]线程同步方式2--互斥量第五 ...
window.open以post方式提交
第一种方式最近在做web项目,碰到需要跨页面传递参数的功能,就是那种需要把当前页面的内容带到新开的子窗体中,以前的做法是传一个id过去,然后在新窗口中去读数据库的内容.虽然不怎么麻烦,但是如果内容么 ...
页面之间的跳转方式和参数传递以及路由和生命周期
微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.概述在Andr ...
exfat最佳单元大小_2020年Window系统重装最佳方式
重装系统有许多种操作安装方法如介质重装(有官方教程),镜像重装,PE重装,CGI重装,GHOST等方法,其中GHOST这方法当初维修店人就是用的这种,这方法已经过时,不适合如今系统安装. 这里只讲讲一 ...
RedirectToAction()转移方式及参数传递
今天在做一个功能的时,使用RedirectToAction()需要从这里传几个参数,从网上查了一下,这样解决.真好. Return RedirectToAction("Index" ...
前端学习（1263）:post方式的参数传递
c/c++语言中函数参数传递的三种方式——徐吉平
此篇为本人处女作,希望大家多多指正 1.这是c/c++中的函数传值方式,函数中只交换了形参x,y的数值,而实参a,b的值并没有发生变化 #include <stdio.h> void m ...
sh执行文件参数传递_详解shell中脚本参数传递的两种方式
方式一:$0,$1,$2.. 采用$0,$1,$2..等方式获取脚本命令行传入的参数,值得注意的是,$0获取到的是脚本路径以及脚本名,后面按顺序获取参数,当参数超过10个时(包括10个),需要使用${ ...
网页制作之JavaScript部分3--事件及事件传输方式（函数调用练习题）重要---持续更新中...
一. 事件:说白了就是调用函数的一种方式.它包括:事件源.事件数据.事件处理程序. JS事件 1.js事件通常和函数结合来使用,这样可以通过发生的事件来驱动函数的执行,从而引起html出现不同的效果. ...
mybatis mapper xml文件的导入方式和查询方式
mybatis mapper xml文件的导入方式和查询方式 ssm框架 Mybatis mapper与SQLSession的关系每个基于MyBatis的应用都是以一个SqlSessionFact ...

window.open实现post方式复杂参数传递

一、需求分析

二、实现方式

window.open实现post方式复杂参数传递相关推荐

最新文章

热门文章