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

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

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

效果如下图所示：

a页面

![](/images/1589453768952.png)

点击跳转按钮后

![](/images/1589453791339.png)

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

代码如下：

a页面:

```html
<!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页面:

```html
<!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>
```

发表评论取消回复

表情：

评论列表（有 0 条评论，902人围观）

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

相关阅读

相关 SpringMVC的注解、参数传递、页面跳转

一.SpringMvc常用注解常用注解 > @RequestMapping:@RequestMapping注解是一个用来处理请求地址映射的注解，可用于映射一个请求或一

野性酷女/ 2023年10月15日 16:55/ 0 赞/ 8 阅读

相关 vue跳转页面传递参数的三种方法

vue中this.$router.push()路由传值和获取的两种常见方法 path不能和params一起使用，否则params将无效。需要用name来指定页面。使用

心已赠人/ 2022年12月27日 08:28/ 0 赞/ 180 阅读

相关 ajax带参数跳转到别的页面,AJAX扩展-POST传递参数并跳转页面

拓展的代码：这段代码的原理是创建一个表单，所有args都创建一个隐藏的input，用post方法把这些参数传递过去注意form表单一定要加载到页面中，即下面代码中标红的

快来打我*/ 2022年09月03日 06:18/ 0 赞/ 381 阅读

相关 html页面跳转传递参数

从a.html跳转到b.html页面，如果给b.html传递参数，可以通过下面的方式来传递： 1. 直接将参数拼接到url上，如b.html?param1=aa&param

痛定思痛。/ 2022年07月14日 01:18/ 0 赞/ 285 阅读

相关 html页面跳转及参数传递

点击第一个html页面上 table数据的一行，跳转到第二个html页面显示这个场景下的详细数据，跳转过去时需要把这行数据的id传递给第二个html页面 1. 第一个html

╰半橙微兮°/ 2022年06月09日 03:45/ 0 赞/ 265 阅读

相关 html页面跳转传递参数

from:http://blog.csdn.net/gnail\_oug/article/details/53286694 从a.html跳转到b.html页面，如

「爱情、让人受尽委屈。」/ 2022年06月03日 06:18/ 0 赞/ 355 阅读

相关 AngularJS 如何实现页面跳转过程中传递参数

转载出处： [https://www.zhihu.com/question/33565135/answer/69651500][https_www.zhihu.com_qu

叁歲伎倆/ 2022年05月26日 03:23/ 0 赞/ 203 阅读

相关 Jquery跳转页面传递参数以及获取url的参数

传递参数： `window.location='editCourse.html?dataId='+dataId+'';` 获取url中的参数(封装的方法)： fun

我就是我/ 2021年11月23日 00:00/ 0 赞/ 637 阅读

相关 vue 跳转页面并传递参数

首先创建readDetail.vue 且在index.js中注册路由。传递页面方式： 1.通过router-link进行跳转 <router-link

偏执的太偏执、/ 2021年06月24日 16:10/ 0 赞/ 559 阅读

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

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

小灰灰/ 2020年05月14日 10:57/ 0 赞/ 903 阅读