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调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
如何使用less实现随机下雪动画详解
Jan 02 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
ThinkPHP之M方法实例详解
2014/06/20 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
Vue表单实例代码
2016/09/05 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
基于python编写的微博应用
2014/10/17 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
使用python实现rsa算法代码
2016/02/17 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
在家更换处方镜片:Lensabl
2019/05/01 全球购物
Java基础知识面试题
2014/03/25 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
2014年终工作总结范本
2014/12/15 职场文书
2015年财政局工作总结
2015/05/21 职场文书
商务信函英语问候语
2015/11/10 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL