千峰商城-springboot项目搭建-65-前端页面之间的URL传值

1.a.html:
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <a href="b.html?pid=101">跳转到b页面</a>
        
        
    </body>
</html>
复制代码

 

b.html:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        This is page B.
        
        
        <hr />
        
        <script type="text/javascript">
            
        
            var value = getUrlParam("pid");
            console.log(value);
            
            function getUrlParam(key){
                var url = window.location.toString();
                
                console.log(url);
                
                var arr = url.split("?");
                if(arr.length>1){
                    var params = arr[1].split("&");
                    for(var i=0;i<params.length;i++){
                        var param = params[i];
                        if(param.split("=")[0] == key){
                            return param.split("=")[1];
                        }
                    }
                }
                return null;
            }
            
            
        </script>
    </body>
</html>
复制代码

 

 
 
 
 
 

 

 

 

 

 
 
2.a.html:
复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <a href="b.html?pid=101&pname=lihua">跳转到b页面</a>
        
        
    </body>
</html>
复制代码

 

 

b.html:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        This is page B.
        
        
        <hr />
        
        <script type="text/javascript">
            
        
            var value = getUrlParam("pid");
            console.log(value);
            
            var pname = getUrlParam("pname");
            console.log(pname);
            
            function getUrlParam(key){
                var url = window.location.toString();
                
                console.log(url);
                
                var arr = url.split("?");
                if(arr.length>1){
                    var params = arr[1].split("&");
                    for(var i=0;i<params.length;i++){
                        var param = params[i];
                        if(param.split("=")[0] == key){
                            return param.split("=")[1];
                        }
                    }
                }
                return null;
            }
            
            
        </script>
    </body>
</html>
复制代码

 

 

 

 

 

 

3.a.html:

 

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <a href="b.html?pid=101&pname=李华">跳转到b页面</a>
        
        
    </body>
</html>
复制代码

 

 

 

 出现中文乱码情况解决办法:

 

b.html:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        This is page B.
        
        
        <hr />
        
        <script type="text/javascript">
            
        
            var value = getUrlParam("pid");
            console.log(value);
            
            var pname = getUrlParam("pname");
            console.log(pname);
            
            function getUrlParam(key){
                var url = decodeURI( window.location.toString() );
                
                var arr = url.split("?");
                if(arr.length>1){
                    var params = arr[1].split("&");
                    for(var i=0;i<params.length;i++){
                        var param = params[i];
                        if(param.split("=")[0] == key){
                            return param.split("=")[1];
                        }
                    }
                }
                return null;
            }
            
            
        </script>
    </body>
</html>
复制代码

 

 

 

 

 

 

 4.定义成js方法:

utils.js:

复制代码
function getUrlParam(key){
    var url = decodeURI( window.location.toString() );
    
    var arr = url.split("?");
    if(arr.length>1){
        var params = arr[1].split("&");
        for(var i=0;i<params.length;i++){
            var param = params[i];
            if(param.split("=")[0] == key){
                return param.split("=")[1];
            }
        }
    }
    return null;
}
        
复制代码

 

 

b.html:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        This is page B.
        
        
        <hr />
        
        <script type="text/javascript" src="js/utils.js" ></script>
        <script type="text/javascript">
            
        
            var value = getUrlParam("pid");
            console.log(value);
            
            var pname = getUrlParam("pname");
            console.log(pname);
            
            
            
        </script>
    </body>
</html>
复制代码

 

 

 

 

 

 

posted @   临易  阅读(47)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示