百搜论坛
0
百搜论坛欢迎您的加入！
adimg adimg
 
首页 » 官方动态 » 详解html中页面跳转传递参数的问题
发布新文章
昨日:篇  今日:篇   总帖:篇   会员:位
发布新文章
admin
博主最大Lv63   
详解html中页面跳转传递参数的问题     

效果如下图所示：

a页面

400e8692235a77905937bcf35d3df75.png

点击跳转按钮后

578c5d2778a2a73e0a238990f3d1ab1.png

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

推荐教程：html教程

代码如下：

a页面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

    <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页面:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

<head>

    <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>

相关视频教程推荐：html视频教程

以上就是详解html中页面跳转传递参数的问题的详细内容

 0  已被阅读了943次  楼主 2020-06-22 12:11:47
回复列表
默认   热门   正序   倒序

回复：详解html中页面跳转传递参数的问题

联系站长 友链申请桂ICP备19000949号-1     桂ICP备19000949号-1
您的IP:18.118.171.20,2024-04-29 18:33:53,Processed in 0.02083 second(s).
免责声明: 本网不承担任何由内容提供商提供的信息所引起的争议和法律责任。
Powered by HadSky 7.12.9
赏
已有0次打赏
赞(0) 赏 分享
分享
取消
html注释的规范用法总结
html如何提高页面的加载速度
免责声明
1、本站资源，均来自网络，版权归原作者，所有资源和文章仅限用于学习和研究目的 。
2、不得用于商业或非法用途，否则，一切责任由该用户承担 ！
如果觉得本文还不错请点个赞或者打赏点轻币哦~
拒绝伸手党，拿走请回复，尊重楼主，尊重你我他~

侵权删除请致信 E-Mail：207882320@qq.com