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 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
jQuery表单插件ajaxForm实例详解
Jan 17 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
JS实现的自定义map方法示例
May 17 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
node.js基础知识小结
2018/02/26 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
基于Python os模块常用命令介绍
2017/11/03 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
python框架flask表单实现详解
2019/11/04 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
产品推广策划方案
2014/05/10 职场文书
效能风暴心得体会
2014/09/04 职场文书
私人委托书格式
2014/09/10 职场文书
怒海潜将观后感
2015/06/11 职场文书
《司马光》教学反思
2016/02/22 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python
详解Python自动化之文件自动化处理
2021/06/21 Python
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js