JS 跳转到新页面并用post传参

今天在开发的过程中有一个需求，要求：打开一个新的页面同时传参。

这个不难实现 <a> 标签就可以实现，但它却是使用 get方式传参，这种直接将参数拼接在 url 的方式（url + ? + 参数）是不安全的，数据直接暴露在地址栏，而且由于不同的浏览器对于地址栏的长度也有限制，导致参数也是有大小限制的。那么能不能使用 post方式传参呢？下面就来介绍各种打开新页面以及传参的方式。

1 超链接<a>标签（get传参）

2 window.open() （get传参）

　　window.open(URL,name,specs,replace)

　　例： window.open（url + "? param1=value1&param2=value2"， "_blank"）

3 form （post传参）

function openPostWindow(url, data, name)
{var tempForm = document.createElement("form");tempForm.id = "tempForm1";tempForm.method = "post";tempForm.action = url;tempForm.target = name;    // _blank - URL加载到一个新的窗口var hideInput = document.createElement("input");hideInput.type = "hidden";hideInput.name = "content";hideInput.value = data;tempForm.appendChild(hideInput);// 可以传多个参数/* var nextHideInput = document.createElement("input");nextHideInput.type = "hidden";nextHideInput.name = "content";nextHideInput.value = data;tempForm.appendChild(nextHideInput); */if(document.all){    // 兼容不同浏览器tempForm.attachEvent("onsubmit",function(){});        //IE}else{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);
}

【参考】

https://www.runoob.com/jsref/met-win-open.html　　
https://blog.csdn.net/u013303551/article/details/52909871

本文作学习交流用，如有错误，欢迎指正！

分类: JavaScript

JS 跳转到新页面并用post传参相关推荐

vue中页面跳转传值_vue跳转方式（打开新页面）及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...
vue项目怎么样去实现新窗口跳转_vue跳转方式（打开新页面）及传参操作示例
本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 link跳转 // 添加参数 // 参数获取 id ...
js跳转到新页面传参以及接收参数的方法
1.传递参数: window.location.href = "./list.html?id="+id; 1.接收参数: (1)接收参数函数封装 function GetReque ...
js layui跳转页面_Layer.js提示层弹窗结束之后自动跳转到新页面的效果
弹层之美 Layer 是一款近年来备受青睐的web弹层组件,提供layer.open(options)核心调用方法.她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的 ...
react如何跳转html页面,react中实现点击跳转到新页面方法
实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面. (一)页面点击本地页面打开新页面引入ant的Button组件 onClick={()=>{wind ...
HTML点击图片跳转到新页面怎么实现？（示例）
我们在设计网页开发过程中,"跳转链接"这个需求是最普遍不过了.相信那些对HTML有一定了解的朋友,想要实现点击某个元素然后跳转到新链接新页面的功能,是非常简单的事情.比如点击按钮实 ...
node怎么跳转链接_nodejs怎么跳转到新页面？
在nodejs中使用req.query或req.params方式获取前端传来的参数,然后根据获取的参数使用res.render()方法进行页面跳转. nodejs跳转到新页面示例: 在我们做项目中一般 ...
node怎么跳转链接_nodejs怎么跳转到新页面
在nodejs中使用req.query或req.params方式获取前端传来的参数,然后根据获取的参数使用res.render()方法进行页面跳转. nodejs跳转到新页面示例: 在我们做项目中一般 ...
vue 跳转打开新页面
vue 跳转打开新页面 let { href } = this.$router.resolve({path: "/myEchars",query: { phone: "1 ...

JS 跳转到新页面并用post传参

JS 跳转到新页面并用post传参

1 超链接<a>标签（get传参）

2 window.open() （get传参）

3 form （post传参）

JS 跳转到新页面并用post传参相关推荐

最新文章

热门文章

JS 跳转到新页面并用post传参

JS 跳转到新页面并用post传参

1 超链接<a>标签 （get传参）

2 window.open() （get传参）

3 form （post传参）

JS 跳转到新页面并用post传参相关推荐

最新文章

热门文章

1 超链接<a>标签（get传参）