html页面跳转传递参数

最新推荐文章于 2024-08-04 21:17:00 发布

gnail_oug

最新推荐文章于 2024-08-04 21:17:00 发布

阅读量2.9w

点赞数 10

分类专栏： html/css 文章标签：传参

本文链接：https://blog.csdn.net/gnail_oug/article/details/53286694

版权

html/css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

从a.html跳转到b.html页面，如果给b.html传递参数，可以通过下面的方式来传递：

直接将参数拼接到url上，如b.html?param1=aa&param2=bb
通过正则表达式解析参数

a页面代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A页面</title>
</head>
<body>
    <div>这是A页面</div>
    <div>
        <!-- 参数直接拼接到url上 -->
        <a href="b.html?param1=aa&param2=bb">访问b页面</a>
    </div>
</body>
</html>

b页面代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>B页面</title>
</head>
<body>
    <div>这是B页面</div>

    <script type="text/javascript">
        function getParams(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
            }
            return null;
        };
        console.log("参数param1:"+getParams("param1"));//输出aa
        console.log("参数param2:"+getParams("param2"));//输出bb
    </script>
</body>
</html>

getParams方法说明：
- window.location.search为url中参数部分，包括?，如果url为http://localhost/b.html?name=aa&age=20，那么window.location.search的值为 ?name=aa&age=20
- 创建正则表达式，以key开头(如name=aa)，或者key前面包含&，并且值的最后有&或直接是末尾，并且值中不包含&。