一个页面通过url行另个一个页面传参

最新推荐文章于 2024-05-24 13:50:55 发布

原创最新推荐文章于 2024-05-24 13:50:55 发布 · 390 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在HTML页面间通过URL传递参数，并在目标页面上解析这些参数。包括使用JavaScript进行页面跳转并附带参数，以及在目标页面中通过jQuery和原生JavaScript获取URL中的参数值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.第一个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a页面 </title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function to(){
            var getval ="valueTest";
            window.location.href="b.html?valus="+getval;
        }
    </script>

</head>
<body>
<button onclick="to()">传值</button>
</body>
</html>

2.第二个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>b页面 </title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function(){
//console.log(location.search.concat());
//manyValues();
            $("#show").html(oneValues());
            //直接在初始化函数里面获取url,直接获取第一个地址，而不是传递过来的地址，因此，使用方法获取url可以防止传递参数加载到页面是出错
        })

        //接收一个值
        function oneValues(){
            var result;
            var url=window.location.search; //获取url中"?"符后的字串
            console.log(url);
            if(url.indexOf("?")!=-1){
                result = url.substr(url.indexOf("=")+1);
            }
            return result;
        }


        //接收多值
        function manyValues(){
            var url=window.location.search;
            if(url.indexOf("?")!=-1){
                var str = url.substr(1);
                strs = str.split("&");
                var key=new Array(strs.length);
                var value=new Array(strs.length);
                for(i=0;i<strs.length;i++){
                    key[i]=strs[i].split("=")[0]
                    value[i]=unescape(strs[i].split("=")[1]);
                    alert(key[i]+"="+value[i]);
                }
            }
        }

    </script>
</head>
<body>
<span>接收的值是：</span>
<span id="show"></span>
</body>
</html>