千峰商城-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 @ 2022-07-20 17:07  临易  阅读(56)  评论(0)    收藏  举报