JS实现页面跳转并传值

最新推荐文章于 2025-04-01 14:30:02 发布

Da_Lian_

最新推荐文章于 2025-04-01 14:30:02 发布

阅读量9.1k

点赞数 7

分类专栏： jsp 文章标签： JS实现页面跳转并传值

本文链接：https://blog.youkuaiyun.com/Programmer_FuQiang/article/details/86635851

版权

jsp 专栏收录该内容

7 篇文章

订阅专栏

第一个页面 page1.html

<html>

<head>

<title>Page 1</title>

<script type="text/javascript">

function topage2()

{

var parm1=document.getElementById("tx1").value;

var parm2=document.getElementById("tx2").value;

var myurl="page2.html"+"?"+"parm1="+parm1+"&parm2="+parm2;

window.location.assign(encodeURI(myurl));

}

</script>

</head>

<body>

<label id="label1" >page1</label>

<br><br>

<input type="text" id="tx1" value="text 1">

<input type="text" id="tx2" value="text 2">

<input type="button" id="bt2" value="go to page2" onclick="topage2()">

</body>

</html>

第二个页面 page2.html

<html>

<head>

<title>Page 2</title>

<script type="text/javascript">

function getparam1()

{

var url=location.href;

var tmp1=url.split("?")[1];

var tmp2=tmp1.split("&")[0];

var tmp3=tmp2.split("=")[1];

var param1=tmp3;

alert(decodeURI(param1));

}

function getparam2()

{

var url=location.href;

var tmp1=url.split("?")[1];

var tmp2=tmp1.split("&")[1];

var tmp3=tmp2.split("=")[1];

var param2=tmp3;

alert(decodeURI(param2));

}

</script>

</head>

<body>

<label id="label1" >page2</label>

<br><br>

<input type="button" id="bt1" value="get parm1" onclick="getparam1()">

<br><br>

<input type="button" id="bt2" value="get parm2" onclick="getparam2()">

</body>

</html>

结果查看：

用浏览器打开page1.html

点击go to page2按纽，进入page2.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Da_Lian_

关注关注

7
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JavaScript 页面跳转及传值示例

CodeRoarX的博客

10-05

637

通过上述示例，我们演示了使用 URL 参数、Cookie 和本地存储三种常见的方式在 JavaScript 中实现页面跳转并传递值的功能。在 JavaScript 中，我们经常需要在页面之间进行跳转，并且有时候还需要在跳转过程中传递一些数据。本文将演示如何实现页面跳转并传递值的功能，并提供相应的代码示例。我们可以将需要传递的值附加在目标页面的 URL 后面，在目标页面中通过解析 URL 参数来获取传递的值。为了传递值，我们可以使用 URL 参数、Cookie、本地存储或通过使用框架和库提供的方法来实现。

js 页面之间的跳转、传参

weixin_33749242的博客

05-30

1220

js实现html 页面之间的跳转传参一、页面之间的跳转传参 1、在页面之间跳转的方式有两种： window.location.href=”test.html?num=10” 地址会改变参数也会被传递但是不会打开新窗口 window.open("test.html") 这样会重新打开一个新窗口。 2、获取参数如果是按照第一种方式进行了传递则有参数，那么我们怎们获取url中的参数那，那...

参与评论您还未登录，请先登录后发表或查看评论

纯JS页面跳转

最新发布

王小工小工历程

04-01

504

在目标URL后附加参数，通过window.location.search在接收页面解析。通过JavaScript触发表单的submit()方法，以GET/POST方式传递参数。替换当前页面为新URL，不保留原页面的浏览历史（用户无法通过“后退”返回）。通过上述方法可根据需求灵活选择跳转方式，同时结合参数传递实现数据交互。无刷新修改URL并更新历史记录（需配合popstate事件处理）。最常用的跳转方式，直接修改当前页面URL实现跳转，保留浏览历史。功能与href类似，但通过方法调用实现跳转，保留历史记录。

js实现页面跳转并传值

kt1776133839的博客

10-13

3897

原理： 1.将参数通过拼接的方式拼接到页面的后面。 2.页面跳转后，解析url，根据关键字符'?',区别是页面还是后面的参数 3.根据关键字符'='，区分是参数名还是参数值页面1：test1.html <body> 请输入： <input type="text" id="txta" > ...

在js中实现页面跳转

txx_laughing的博客

11-09

1061

js方式的页面跳转 1.window.location.href方式 window.location.href="target.aspx"; 2.window.navigate方式跳转 window.navigate("target.aspx"); 3.window.loction.replace方式实现页面跳转，注意跟第一种方式的区别

js中实现页面跳转的方法

m0_57149894的博客

04-17

264

<html> <head> <script language="javascript"><!-- function old_page() { window.location = "http://www.baidu.com" } function replace() { window.location.replace("http://www.baidu.com") } f

JavaScript实现在页面间传值的方法

10-24

总结来说，本文档详细介绍了几种基于JavaScript在页面间传递参数的实现方法，适用于那些希望减少服务器交互而采用前端技术来增强用户体验的场景。这些方法包括通过URL重定向传递参数、使用隐藏表单字段传递参数以及...

微信小程序实现页面跳转传值以及获取值的方法分析

08-28

微信小程序页面跳转传值获取值方法分析微信小程序实现页面跳转传值和获取值是微信小程序开发中...微信小程序实现页面跳转传值和获取值有多种方法，我们可以根据实际情况选择合适的方法来实现页面跳转传值和获取值。

ASP单选按钮实现页面跳转并传值

05-18

使用 ASP 实现单选按钮的页面跳转并传值是非常简单的，只需要使用 JavaScript 来实现 onclick 事件，并将单选按钮的值传递给下一个页面。同时，在下一个页面中，我们可以使用 Request.QueryString 获取传递的参数，...

静态页面html中跳转传值的JS处理技巧

10-22

首先，页面跳转传递参数通常通过URL的查询字符串（query string）来实现。查询字符串位于URL的问号（?）之后，由一个或多个参数对组成，每对参数之间用&符号分隔。每个参数对包括一个参数名和一个参数值，它们之间用...

js 中实现页面跳转的方法

sweetgirl520的博客

03-01

488

window.location = "http://www.baidu.com" 跳转后有后退功能 window.location.replace("http://www.baidu.com") 跳转后没有后退功能 window.open("http://www.baidu.com") 要新的窗口打开链接

js实现页面跳转的几种方式

11-20

js实现页面跳转的几种方式

js页面跳转传参

webZRH的博客

07-27

1322

a href="a.html?param=value&param1=value1&param2=value2">超链接a> html lang="en"> head> meta charset="UTF-8"> title>title> script type="text/javascript">

JavaScript的跳转传参方式

z13903931414的博客

05-15

942

例如，URL参数对于简单的键值对传递很方便，但可能不适合传递大量数据或敏感信息。而Web Storage API和Cookie则提供了更持久和灵活的存储选项，但也可能受到浏览器限制或安全问题的影响。你可以在跳转之前设置一个Cookie，然后在目标页面中读取它。方法，它们允许你修改浏览器的历史记录而不重新加载页面。在JavaScript中，页面跳转并传递参数通常可以通过几种不同的方式来实现。这是最常见的方式，通过在URL的末尾添加参数来实现。存储的数据将在用户的浏览器会话之间持久化，而。

js的跳转传参方式

xiaohua0708day的博客

05-11

990

虽然Cookie主要用于服务器与客户端之间的通信，但你也可以使用它们来在客户端的不同页面之间传递数据。然而，由于Cookie的大小限制和每次HTTP请求都会发送Cookie的潜在性能问题，因此它们通常不是传递大量数据的首选方法。如果你正在使用JavaScript库或框架（如React、Vue、Angular等），那么可能会有更优雅和简洁的方法来管理和传递数据。例如，在React中，你可以使用React Router库来处理路由和参数传递。除了查询字符串外，你还可以使用URL的哈希部分（在。

js页面跳转传值

compruterlearner的博客

10-01

356

1、在url路径后面带参数，参数与url之间用?隔开，参数与参数之间用&符隔开 window.location.href = “a.html?name='val'&age='val'"; 2、通过localStorage 和 sessionStorage 先存本地在取出数据 //存数据 window.localStorage.setItem("key", val); //我一般常用下面这个第一个参数是名字，第二个参数是存数的数据 window.sessionStorage.setIte

2021-01-06

qq_42128797的博客

01-06

如何用js跳转页面传值，在用跳转那个页面用js接受那个页面传过来的值

js实现两个页面之间跳转参数传递

我爱特雷西

02-05

4018

原文链接 https://www.cnblogs.com/zhu-xingyu/p/5577118.html html在设计时，规定跳转地址后加”?”表示从此开始为跟随页面地址跳转的参数。有时候，我们希望获得相应的跳转前页面里的内容，这时候我们就可以考虑将内容以参数形式放到地址中传过来，这里我建议将参数以变量形式传递。代码案例如下： ?1234567891011121314

前端在html页面之间跳转与传值(js代码

qq_27628085的博客

06-04

9256

页面跳转方法如下；方法一： window.location.href="b.html"; 方法二： self.location="b.html"; 方法三： top.location="b.html"; 方法四(返回上一个页面，这个应该不算，先放这)： window.history.back(-1); 问题的思考： 1.为什么给window.location和wind...

javascript使用cookie实现页面跳转传值

10-26

在JavaScript中，你可以使用cookies来存储和传递值，特别是在做页面间的简单数据传输时。以下是一个基本的过程： 1. **设置Cookie**: ```javascript document.cookie = "key=value; expires=expiry_date; path=path"; ``` 这里，`key`是你想要存储的数据的键，`value`是要存储的值，`expiry_date`是过期日期（格式如"Sat, 01 Jan 2022 00:00:00 GMT"），`path`是 cookie 的有效路径。 2. **读取Cookie**: ```javascript var cookieValue = getCookie("key"); function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } ``` 3. **页面跳转并携带Cookie**: 如果你想在跳转到另一个页面时将cookie一起发送过去，可以在目标页面的URL中附加查询字符串，例如 `window.location.href = "newpage.html?key=" + encodeURIComponent(cookieValue);` 4. **接收Cookie**: 在新页面`newpage.html`中，你可以通过类似的方式读取这个附加的查询字符串来获取cookie值。然而，需要注意的是，cookie有大小限制（通常浏览器设置为4KB），并且不是安全的存储机制，敏感信息不应直接通过cookie传递。