如何在html页面跳转的时候携带数据(页面跳转时参数传递问题)?

在html页面进行跳转的时候,我们需要把一个页面的数据传输到另外一个页面时,我们应该怎么做呢?

解决办法:

效果如下:

a页面

点击跳转按钮后

在b页面可以获取到对应的值。

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>a页面</title>
    <script>
        $(function(){
             name = $("#name").text();
             age = $("#age").text();
            $("#btn").on("click",function(){
               jump1();
            });
        });
        function jump1(){
            url = "b.html?name="+name+"&age="+age;//此处拼接内容
            window.location.href = url;
        }
    </script>
</head>
<body>
   <div id="name">tony</div>
   <div id="age">23</div>
   <button id="btn">跳转</button>
</body>
</html>

将要跳转到的b页面:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/jquery-3.0.0.min.js"></script>
    <script src="js/jquery.params.js"></script>
    <title>b页面</title>
    <script>
        $(function(){
           getData1();
        });
        function getData1(){
            var name = $.query.get("name");
            var age = $.query.get("age");
            $("#name").text(name);
            $("#age").text(age);
        }
    </script>
</head>
<body>
   <div id="name"></div>
   <div id="age"></div>
</body>
</html>

也可以这样传递(a端):

onclick=\"window.location.href='detail.html?id="+activity.id+"'>

在b端,这样接收:

//获取 上一个页面传来的参数
var searchUrl = window.location.href;
var searchData = searchUrl.split("="); //截取 url中的“=”,获得“=”后面的参数
var searchText = decodeURI(searchData[1]); //decodeURI解码

以上所述是小编给大家介绍的html页面跳转传递参数问题,希望对大家有所帮助!

  • 10
    点赞
  • 50
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
HTML页面之间跳转携带数据可以使用URL参数、表单提交或者使用localStorage等方法。下面分别介绍这几种方式: 1. URL参数:将数据作为URL的一部分传递,在目标页面可以通过解析URL参数来获取数据。例如: ```html <a href="target.html?id=123&name=John">跳转到目标页面</a> ``` 在目标页面中可以使用JavaScript获取URL参数: ```javascript var params = new URLSearchParams(window.location.search); var id = params.get('id'); var name = params.get('name'); ``` 2. 表单提交:如果数据需要在跳转提交到服务器端进行处理,可以使用表单提交。例如: ```html <form action="target.html" method="GET"> <input type="hidden" name="id" value="123"> <input type="hidden" name="name" value="John"> <input type="submit" value="跳转到目标页面"> </form> ``` 在目标页面中可以通过JavaScript或者服务器端处理获取表单提交的数据。 3. localStorage:使用localStorage可以在浏览器本地存储数据跳转到目标页面后可以从localStorage中获取数据。例如: 在源页面中存储数据到localStorage: ```javascript localStorage.setItem('id', '123'); localStorage.setItem('name', 'John'); ``` 在目标页面中获取localStorage中的数据: ```javascript var id = localStorage.getItem('id'); var name = localStorage.getItem('name'); ``` 需要注意的是,使用localStorage存储的数据在浏览器关闭之前会一直存在,如果需要在目标页面使用完数据后删除,可以使用 `localStorage.removeItem(key)` 方法进行删除。 根据具体需求和场景选择合适的方式来携带数据进行页面跳转

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值