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

最新推荐文章于 2024-06-04 19:55:06 发布

七月末丷

最新推荐文章于 2024-06-04 19:55:06 发布

阅读量3.1k

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/aring1998/article/details/113047385

版权

本文详细介绍了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
评论
【JS】两个页面之间的传参和获取（获取url中的参数）

前言：近期首次完成了一次项目，其中大量用到两个页面之间的传参和获取，在此做一个总结。零、获取url中的参数函数只是需要获参函数的朋友这里直接复制就好~<script> // 截取字符串后面的参数 function getParameter(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构建一个含有目标参数的正则表达式对象 v
复制链接

扫一扫