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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
JS判断字符串包含的方法
May 05 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
使用Javascript简单计算器
Nov 17 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 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数据库类
2009/05/27 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
JS作用域链详解
2017/06/26 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
理解python正则表达式
2016/01/15 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
中科前程Java笔试题
2016/11/20 面试题
服装设计师职业生涯规划范文
2014/02/28 职场文书
HR求职自荐信范文
2014/06/21 职场文书
中专生自荐信
2014/06/25 职场文书