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

小灰灰 2020-05-14 10:57 1018阅读 0赞

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

效果如下图所示:

a页面

点击跳转按钮后

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

代码如下:

a页面:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="js/jquery-3.0.0.min.js"></script>
  6. <script src="js/jquery.params.js"></script>
  7. <title>a页面</title>
  8. <script>
  9. $(function(){
  10. name = $("#name").text();
  11. age = $("#age").text();
  12. $("#btn").on("click",function(){
  13. jump1();
  14. });
  15. });
  16. function jump1(){
  17. url = "b.html?name="+name+"&age="+age;//此处拼接内容
  18. window.location.href = url;
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <div id="name">tony</div>
  24. <div id="age">23</div>
  25. <button id="btn">跳转</button>
  26. </body>
  27. </html>

将要跳转到的b页面:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <script src="js/jquery-3.0.0.min.js"></script>
  6. <script src="js/jquery.params.js"></script>
  7. <title>b页面</title>
  8. <script>
  9. $(function(){
  10. getData1();
  11. });
  12. function getData1(){
  13. var name = $.query.get("name");
  14. var age = $.query.get("age");
  15. $("#name").text(name);
  16. $("#age").text(age);
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. <div id="name"></div>
  22. <div id="age"></div>
  23. </body>
  24. </html>

发表评论

表情:
评论列表 (有 0 条评论,1018人围观)

还没有评论,来说两句吧...

相关阅读