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

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 {currentHj Id, currentXsid, currentTaskId, currentLcid, currentXsxm} = this.props; this.downloadWord(window.baseUrl + /xxxxxxx, currentTaskId, currentXsid, currentHj Id, currentLcid, currentXsxm, previewFormDetail, cpxIdArr.toString( , _ } ; //创建隐藏表单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