js获取网页url参数的三种方法

网页文件名是 get.html，在后面加参数?id=100&name=jack&age=30

     http://localhost/get.html?id=100&name=jack&age=30

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js获取网页参数的三种方法</title>
</head>
<body>
    <script>
        function GetRequest1() {  
            var url = location.search; //获取url中"?"符后的字串  
            if (url.indexOf("?") != -1) {  //判断是否有参数  
                var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串  
                strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）  
                alert(strs[1]);     //直接弹出第一个参数 （如果有多个参数 还要进行循环的）  
            }  
        }  

        function GetRequest() {  
            var url = location.search; //获取url中"?"符后的字串  
            var theRequest = new Object();  
            if (url.indexOf("?") != -1) {  
                var str = url.substr(1);  
                strs = str.split("&");  
                for (var i = 0; i < strs.length; i++) {  
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);  
                }  
            }  
            return theRequest;  
        }  

        function getQueryString(name){   //使用正则表达式返回与模式串匹配的字符串
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  //表示开头为空或&，中间有name,后面有=及任意字串或&结尾
            var r = window.location.search.substr(1).match(reg);  
            // console.log(r);
            // console.log(r[2]);
            if (r!=null) return r[2]; return '';  
        }  

        function fun2(params) {
            // var req = new Object();  
            // req = GetRequest();  
            req =new GetRequest(); 
            alert(req.id+" "+req.name+" "+req.age);  
        }

 
    </script>
    <button onclick="GetRequest1()">url只有一个参数</button>
    <button onclick="fun2()">显示url的多个参数</button>
    <button onclick="alert(getQueryString('age'))">用正则 显示url参数</button>
    
</body>
</html>

　　

posted @ 2022-07-06 22:25  paoPaoLong_liu  阅读(1043)  评论(0)    收藏  举报