html页面跳转传递参数

最新推荐文章于 2024-06-20 17:55:16 发布
最新推荐文章于 2024-06-20 17:55:16 发布
阅读量2.9w 收藏 46
点赞数 10
分类专栏： html/css 文章标签： 传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gnail_oug/article/details/53286694
版权

从a.html跳转到b.html页面，如果给b.html传递参数，可以通过下面的方式来传递：

  1. 直接将参数拼接到url上，如b.html?param1=aa&param2=bb
  2. 通过正则表达式解析参数

    a页面代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A页面</title>
</head>
<body>
    <div>这是A页面</div>
    <div>
        <!-- 参数直接拼接到url上 -->
        <a href="b.html?param1=aa&param2=bb">访问b页面</a>
    </div>
</body>
</html>


b页面代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>B页面</title>
</head>
<body>
    <div>这是B页面</div>

    <script type="text/javascript">
        function getParams(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };
        console.log("参数param1:"+getParams("param1"));//输出aa
        console.log("参数param2:"+getParams("param2"));//输出bb
    </script>
</body>
</html>

getParams方法说明：
- window.location.search为url中参数部分，包括?，如果url为http://localhost/b.html?name=aa&age=20，那么window.location.search的值为 ?name=aa&age=20
- 创建正则表达式，以key开头(如name=aa)，或者key前面包含&，并且值的最后有&或直接是末尾，并且值中不包含&。

gnail_oug
关注
  • 10
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
php页面跳转参数传递参数,HTML页面跳转及参数传递问题
weixin_34036075的博客
03-10 552
这篇文章给大家详细介绍了HTML页面跳转及参数传递问题，希望能帮助到大家。HTML页面跳转：window.open(url, "", "width=600,height=400");第二个参数：_self，在当前窗口打开窗口；_blank(默认值)，在另外的新建窗口打开新窗口；window.location.href="http://www.jb51.net"; //在同当前窗口中打开窗口...
html页面跳转传递参数Demo
05-05
在这个“html页面跳转传递参数Demo”中，我们将探讨如何在HTML页面之间传递参数，以实现更丰富的用户交互体验。 一、HTML页面跳转 HTML页面跳转主要通过`<a>`标签的`href`属性来实现。例如，我们可以创建一个链接，...
如何在html页面跳转的时候携带数据(页面跳转时参数传递问题)？
darkfu_的博客
05-16 1万+
在html页面进行跳转的时候，我们需要把一个页面的数据传输到另外一个页面时，我们应该怎么做呢？ 解决办法： 效果如下： a页面 点击跳转按钮后 在b页面可以获取到对应的值。 代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/jquery-3.0.0.min.js"></script&g
HTML页面跳转传递参数
qq_43852612的博客
06-28 3212
实现html页面之间的参数传递
HTML参数
最新发布
JKzxx的博客
06-20 203
type=text 输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。1,type=文本 输入类型是文本，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。参数值:输入框中的默认值 特殊参数只读:表示该框中只能显示，不能添加修改。参数name:同样是表示的该文本输入框名称。参数最大长度:输入框中允许输入字符的最大数。参数名称:同样是表示的该文本输入框名称。参数大小:输入框的长度大小。
HTML页面跳转及传递参数
qq_51131331的博客
01-16 1万+
这里使用ajax实现页面跳转并传参； 实例：用户在登录界面输入账号密码后跳转到用户界面并且传递账号姓名； 1、页面跳转： 登录界面ajax跳转代码： $.ajax({ url:"/webapi/login/user", data:{ username:name, password:password } }).done(function (rs
html5 页面 参数传递,html页面跳转传递参数问题
weixin_34844709的博客
06-03 240
效果如下：a页面点击跳转按钮后在b页面可以获取到对应的值。代码如下：a页面:a页面$(function(){name = $("#name").text();age = $("#age").text();$("#btn").on("click",function(){jump1();});});function jump1(){url = "b.html?name="+name+"&age...
html页面跳转及参数传递
localhost
04-15 709
【代码】html页面跳转及参数传递。
php页面跳转 带参数传递,关于html页面跳转传递参数问题解答
weixin_28898707的博客
03-09 410
本文主要介绍了html页面跳转传递参数问题的相关资料,需要的朋友可以参考下，希望能帮助到大家。效果如下：a页面点击跳转按钮后在b页面可以获取到对应的值。代码如下：a页面:a页面$(function(){name = $("#name").text();age = $("#age").text();$("#btn").on("click",function(){jump1();});});funct...
html跳转到新的页面参数不显示,html页面跳转传递参数问题
weixin_39624774的博客
06-04 871
效果如下：a页面点击跳转按钮后在b页面可以获取到对应的值。代码如下：a页面:a页面$(function(){name = $("#name").text();age = $("#age").text();$("#btn").on("click",function(){jump1();});});function jump1(){url = "b.html?name="+name+"&age...
php页面跳转参数传递参数,有关html页面跳转传递参数的问题详解
weixin_32273559的博客
03-10 126
这篇文章主要介绍了html页面跳转传递参数问题的相关资料,需要的朋友可以参考下效果如下：a页面点击跳转按钮后在b页面可以获取到对应的值。代码如下：a页面:a页面$(function(){name = $("#name").text();age = $("#age").text();$("#btn").on("click",function(){jump1();});});function jump...
html页面跳转传递参数问题
09-28
本篇文章将详细探讨如何在HTML页面跳转时传递参数，并以提供的代码示例为依据进行解析。 首先，让我们来看一下在A页面上实现跳转的代码。A页面包含两个元素，一个表示名字（`<div id="name">tony</div>`），另一个...
HTML页面跳转及参数传递问题
09-28
给大家详细介绍了HTML页面跳转及参数传递问题，需要的朋友参考下吧
Vue页面跳转传递参数及接收方式
10-14
本文将详细介绍两种在Vue中实现页面跳转并传递参数的方法，以及如何接收这些参数。 首先，我们需要配置Vue Router，这是Vue.js的官方路由库，用于管理应用的导航。在`src/router/config.js`文件中，我们需要导入Vue...
HTML label标签介绍
热门推荐
蝈蝈的博客
06-03 5万+
label标签介绍label标签为input元素定义标注(标记)，它不会向用户呈现任何特殊效果，和span标签类似。但label标签和span标签最大的区别就是它为鼠标用户改进了可用性，可以关联特定的表单控件。label标签和特定表单控件关联之后，如果用户在 label 元素内点击文本，就会触发关联的表单控件。就是说，当用户选择该label标签时，浏览器就会自动将焦点转到和label标签相关的表单控
CSS相对定位和绝对定位详解
蝈蝈的博客
08-25 1万+
相对定位和绝对定位，不改变元素的大小形状，只改变元素的位置。相对定位和绝对定位是通过position属性来控制的，position属性的值为下面几种： 值 描述 absolute 使元素绝对定位，相对于static定位以外的最近的一个祖先元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 使元素相
设置input标签按tab键时不获取焦点的方法
蝈蝈的博客
07-18 1万+
要求输入物料编号，按tab键后，自动获取并填充配件编号、配件名称和品牌列，并且将光标物料编号input直接移到数量的input里，如下图(表格的单元格里都是input,只是border去掉了)： 解决方法： 1、将配件编号、配件名称、品牌的input的tabindex设置很大(不推荐这种方式，推荐使用第2种) 2、将配件编号、配件名称、品牌的input的tabindex设
防止INPUT回车自动提交FORM表单
蝈蝈的博客
12-06 3149
在做广菲克项目里的一个修改功能时，发现form表单里只有一个input时，按回车form就自动提交了。 form中的input只有一个，input获得焦点时按回车会form自动提交： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action
ajax请求页面跳转传递参数
06-10
可以使用AJAX进行页面跳转并传递参数，具体步骤如下： 1. 通过AJAX向服务器发送请求，获取需要跳转的页面以及传递的参数。 2. 在页面加载完成后，使用JavaScript将获取到的参数填充到页面中。 3. 使用JavaScript实现页面跳转。 下面是一个示例代码： ``` //使用jQuery发送AJAX请求 $.ajax({ url: "yourpage.html", data: {param1: "value1", param2: "value2"}, success: function(data){ //页面加载完成后将参数填充到页面中 $("#content").html(data); //使用JavaScript实现页面跳转 window.location.href = "yourpage.html"; } }); ``` 在上述代码中，我们通过AJAX向服务器发送请求，传递了参数param1和param2。当服务器返回数据后，我们将数据填充到页面中，并使用JavaScript实现了页面跳转。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值