您的当前位置：首页 html页面跳转传递参数时常见问题

html页面跳转传递参数时常见问题

来源：才杰教育

这篇文章主要介绍了html页面跳转传递参数问题的相关资料,需要的朋友可以参考下

效果如下：

a页面

点击跳转按钮后

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

代码如下：

a页面:

<!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>
 <p id="name">tony</p>
 <p id="age">23</p>
 <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>
 <p id="name"></p>
 <p id="age"></p>
</body>
</html>