window.open()实现post传递参数


Posted in Javascript onMarch 12, 2015

在实际项目中,常常遇到这样的需求,即实现子系统页面之间跳转并在新的页面打开,我所在项目组使用的是SSH框架,所以url均为类似****.action,同时还带有两参数(系统ID与系统名称),两个参数被struts拦截后存入session中,在打开的子系统页面中还有个ztree插件实现的树状菜单需要参数系统ID才能初始化,直接使用window.open(url,"_blank"),会使得url长度过长,同时还暴露一些参数。故想改用post方式提交,隐藏提交过程中参数的传递。首先想到ajax提交,但是两个参数的传递会存在问题,ajax提交与window.open()会使得action走两遍,因此舍去。后又重新认真看了window.open()的API,链接地址http://www.w3school.com.cn/jsref/met_win_open.asp。window.open()默认是get提交方式,想要实现post提交方式,还得另想它法。参考https://3water.com/article/32826.htm,这里介绍了一种方法。也是常被采用的方法。我根据实际情况略作修改:

function openPostWindow(url, name, data1, data2){

    var tempForm = document.createElement("form");

    tempForm.id = "tempForm1";

    tempForm.method = "post";

    tempForm.action = url;

    tempForm.target=name;

    var hideInput1 = document.createElement("input");

    hideInput1.type = "hidden";

    hideInput1.name="xtid";

    hideInput1.value = data1;

    var hideInput2 = document.createElement("input");

    hideInput2.type = "hidden";

    hideInput2.name="xtmc";

    hideInput2.value = data2;

    tempForm.appendChild(hideInput1);

    tempForm.appendChild(hideInput2);

    if(document.all){

        tempForm.attachEvent("onsubmit",function(){});        //IE

    }else{

        var subObj = tempForm.addEventListener("submit",function(){},false);    //firefox

    }

    document.body.appendChild(tempForm);

    if(document.all){

        tempForm.fireEvent("onsubmit");

    }else{

        tempForm.dispatchEvent(new Event("submit"));

    }

    tempForm.submit();

    document.body.removeChild(tempForm);

}

//function openWindow(name){

//    window.open("",name);

//}

 openPostWindow()函数中的参数个数根据实际需要自行修改。data1与data2为action需要传递的参数。此外,此处还需考虑Javascript事件浏览器兼容问题。我这里注释了function openWindow(),不然会多打开一个空白页面(about:blank)。这样基本满足需求了。

以上就是本文分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
js运动动画的八个知识点
Mar 12 #Javascript
js实现最短的XML格式化工具实例
Mar 12 #Javascript
微信中一些常用的js方法汇总
Mar 12 #Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 #Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 #Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 #Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 #Javascript
You might like
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
PHP常见漏洞攻击分析
2016/02/21 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python如何获取apk的packagename和activity
2020/01/10 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
小车司机岗位职责
2013/11/25 职场文书
销售经理工作职责范文
2013/12/03 职场文书
幼教毕业生自我鉴定
2014/01/12 职场文书
高中生职业规划范文
2014/03/09 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
小学生学习感言
2014/03/10 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
防卫过当辩护词
2015/05/21 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2019军训心得体会
2019/06/27 职场文书
Python中tqdm的使用和例子
2022/09/23 Python