您的位置：首页 > 网页制作 > html教程

html页面跳转传递参数问题

  发布时间：2023-07-21 14:48:35   作者：langzi  
这篇文章主要介绍了html页面跳转传递参数问题的相关资料,需要的朋友可以参考下

效果如下：

a页面

点击跳转按钮后

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

代码如下：

a页面:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head lang="en"> 
  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 lang="en"> 
  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> 
以上所述是小编给大家介绍的html页面跳转传递参数问题
  • Tag：