【JS】两个页面之间的传参和获取(获取url中的参数)

本文详细介绍了JavaScript中URL参数的获取与传递,包括在页面间如何进行数据的传参和获取,以及在实际应用中的场景,如通过不同方式打开公共页面展示不同内容。文中提供了一套完整的函数实现,并附带实例代码,对于前端开发人员具有参考价值。
摘要由CSDN通过智能技术生成

前言:近期首次完成了一次项目,其中大量用到两个页面之间的传参和获取,在此做一个总结。

零、获取url中的参数函数

只是需要获参函数的朋友这里直接复制就好~

<script>
    // 截取字符串后面的参数
    function getParameter(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); // 匹配目标参数
        if (r != null) {
            //清理参数中为null的值
            if (unescape(r[2]) == "null") {  //在这里做了优化,因为为空时获取的是字符串null
                return "";
            }
            return unescape(r[2]); // unescape()解码,返回参数值
        } else {
            return "";
        }
    }
</script>

一、实现效果

二、源码

页面1 (传参):

注意传中文时要用escape编码,否则传递过程中会乱码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS传参</title>
</head>
<body>
    <span>用户ID:</span><input type="text" id="uid">
    <br>
    <span>用户名:</span><input type="text" id="uName" autocomplete="off">  <!-- 这里为了保护隐私取消了自动补全 -->
    <br>
    <a href="./test2.html" id="transmit" onclick="go()">跳转</a>
    <script>
        let transmit = document.getElementById("transmit")
        function go(){
            let uid = document.getElementById("uid").value
            let uName = document.getElementById("uName").value
            // 改变a的herf指向
            transmit.href = "./test2.html?uid=" + uid + 
                "&uName=" + escape(uName)  // 如果传递中文需要先用escape()编码
        }
    </script>
</body>
</html>

页面2(获参):

1.获参的源码跟网上没有太大差异,因为在使用的过程中发现假如获取参数为null时,该函数会返回字符串“null”,所以做了优化,让其返回""(空值)

2.获参函数的用法是getParameter("对应的参数名"),注意不要漏掉引号

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS获取参数</title>
</head>
<body>
    <script>
        // 截取字符串后面的参数
        function getParameter(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); // 匹配目标参数
            if (r != null) {
                //清理参数中为null的值
                if (unescape(r[2]) == "null") {  //在这里做了优化,因为为空时获取的是字符串null
                    return "";
                }
                return unescape(r[2]); // unescape()解码,返回参数值
            } else {
                return "";
            }
        }

        // 获取url中的参数
        let uid = getParameter("uid")
        let uName = getParameter("uName")
        document.write("已获取uid的参数为 " + uid + ",已获取uName的参数为 " + uName)
    </script>
</body>
</html>

三、其他运用场景

比较有趣的一个用法是公共页面通过不同的打开方式,会展示不同的内容

实现效果:

源码:

页面1(打开公共页面):

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打开页面</title>
</head>
<body>
    <a href="./test2.html" id="transmit1" onclick="go1()">跳转1</a>
    <a href="./test2.html" id="transmit2" onclick="go2()">跳转2</a>
    <script>
        function go1(){
            let transmit = document.getElementById("transmit1")
            let openPage = 1
            // 改变a的herf指向
            transmit.href = "./publicWeb.html?openPage=" + openPage
        }

        function go2(){
            let transmit = document.getElementById("transmit2")
            let openPage = 2
            transmit.href = "./publicWeb.html?openPage=" + openPage
        }
    </script>
</body>

页面2(公共页面):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公共页面</title>
    <style>
        .hide{
            display: none;
        }

        #green{
            color: green;
        }
        
        #red{
            color: red;
        }

        #blue{
            color: blue;
        }
    </style>
</head>
<body>
    <span id="green">hello!我是小绿</span>
    <span id="red">hello!我是小红</span>
    <span id="blue">hello!我是小蓝</span>
    <script>
        // 截取字符串后面的参数
        function getParameter(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg); // 匹配目标参数
            if (r != null) {
                //清理参数中为null的值
                if (unescape(r[2]) == "null") {  //在这里做了优化,因为为空时获取的是字符串null
                    return "";
                }
                return unescape(r[2]); // unescape()解码,返回参数值
            } else {
                return "";
            }
        }

        // 获取url中的openPage
        let openPage = getParameter("openPage")
        // 做判断,不同方式打开本页面的openPage不同
        if (openPage == 1){
            document.getElementById("green").classList.add("hide")
        }
        else if (openPage == 2){
            document.getElementById("red").classList.add("hide")
        }
    </script>
</body>
</html>

 

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值