js使用post 方式打开新窗口

 更新时间:2015年02月26日 15:37:37   投稿:hebedich  
这篇文章主要介绍了js使用post 方式打开新窗口的相关资料,需要的朋友可以参考下

js中一般新打开窗口很简单直接window.open(url);就可以了,

但是由于我希望传递参数到服务端,而且参数看起来很长一串,而且get方式的提交参数长度是有限制的,因此我有以下需求:

1,js中实现post提交

2,返回的页面在新窗口显示

首先我是这么做的:

复制代码 代码如下:

 $.ajax({  
                     type: "POST",  
                     url: '${contextPath}/analyse/detail.do',  
                     data: {carNum :carNum,ids:refIds},  
                     success: function(str_response) { var obj = window.open("about:blank");  
                        obj.document.write(str_response);  
                     }  
                 });

通过jQuery ajax提交,返回的数据写在新的页面中,但是由于浏览器的会拦截自动弹出的窗口,这样还需用户自己解除拦截,用户体验很差,

然后我又通过模拟form表单的提交来实现

复制代码 代码如下:

function post(URL, PARAMS) { var temp_form = document.createElement("form");     
            temp_form .action = URL;     
            temp_form .target = "_blank";
            temp_form .method = "post";     
            temp_form .style.display = "none"; for (var x in PARAMS) { var opt = document.createElement("textarea");     
                opt.name = x;     
                opt.value = PARAMS[x];     
                temp_form .appendChild(opt);     
            }     
            document.body.appendChild(temp);     
            temp_form .submit();    
        }

注意:如需新打开窗口 form 的target属性要设置为'_blank'

然后请求post('${contextPath}/analyse/detail.do',{carNum :carNum,ids:refIds});就可以了

相关文章

  • JavaScript实现简单动态进度条效果

    JavaScript实现简单动态进度条效果

    这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • javascript 三种数组复制方法的性能对比

    javascript 三种数组复制方法的性能对比

    javascript 三种数组复制方法的性能对比,对于webkit, 使用concat; 其他浏览器, 使用slice.
    2010-01-01
  • uniapp使用u-upload组件来实现图片上传功能

    uniapp使用u-upload组件来实现图片上传功能

    最近在用uniapp开发微信小程序,下面这篇文章主要给大家介绍了关于uniapp使用u-upload组件来实现图片上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • TypeScript 使用 Tuple Union 声明函数重载

    TypeScript 使用 Tuple Union 声明函数重载

    这篇文章主要介绍了TypeScript 使用 Tuple Union 声明函数重载,TypeScript 中为函数添加多个签名后,依然需要添加相应的代码来判断并从不同的签名参数列表中获取对应的参数,下文就来探索方法和技巧吧
    2022-04-04
  • JS对象属性的检测与获取操作实例分析

    JS对象属性的检测与获取操作实例分析

    这篇文章主要介绍了JS对象属性的检测与获取操作,结合实例形式分析了JS针对ES5、ES6实现对象属性的检测与获取常见操作技巧,需要的朋友可以参考下
    2020-03-03
  • Bootstrap中CSS的使用方法

    Bootstrap中CSS的使用方法

    这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 基于js中的存储键值对以及注意事项介绍

    基于js中的存储键值对以及注意事项介绍

    下面小编就为大家介绍一下基于js中的存储键值对以及注意事项。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • javascript检测两个数组是否相似

    javascript检测两个数组是否相似

    Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,要判断JS中的两个数组是否相同,需要先将数组转换为字符串,再作比较。
    2015-05-05
  • JavaScript中立即执行函数实例详解

    JavaScript中立即执行函数实例详解

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解。这篇文章主要给大家介绍了关于JavaScript中立即执行函数的相关资料,需要的朋友可以参考下。
    2017-11-11
  • js如何获取网页所有图片

    js如何获取网页所有图片

    这篇文章主要为大家详细介绍了js如何获取网页所有图片,js获取网页所有图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论