js如何獲取url參數，拼接url參數

1、通過字符串截取的方式獲取參數值；

(注意location.search截取“？”后的字符串，該方法只適用於通過鏈接跳轉的路徑，如果是直接截取路徑則返回空值，因此應該加上判斷)

 1 /**
 2  * [獲取URL中的參數名及參數值的集合]
 3  * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&username=張三
 6  */
 7 function GetRequest(urlStr) {//兩種方式，輸入鏈接獲取或當前鏈接獲取
 8     if (typeof urlStr == "undefined") {
 9         var url = decodeURI(location.search); //獲取url中"?"符后的字符串
10     } else {
11         var url = "?" + urlStr.split("?")[1];
12     }
13     var theRequest = new Object();
14     if (url.indexOf("?") != -1) {
15         var str = url.substr(1);//去掉問號，問號為第一個字符
16         strs = str.split("&");
17         for (var i = 0; i < strs.length; i++) {
18             theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
19         }
20     }
21     return theRequest;
22 }

 

下面我們看一下結果：

1 var parms_1 = GetRequest();
2 console.log(parms_1); // {"uid":"admin","rid":"1","fid":"2","name":"張三"}
3 console.log(parms_1['name']); // '張三'
4 var parms_2 = GetRequest('http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=張三');
5 console.log(parms_2); // {"uid":"admin","rid":"1","fid":"2","name":"張三"}
6 console.log(parms_2['name']); // '張三'

2、通過參數名獲取url中的參數值

(鏈接轉碼問題可參考上一篇文章https://www.cnblogs.com/shubo168/p/13398004.html）

 1 /**
 2  * [通過參數名獲取url中的參數值]
 3  * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=張三
 6  */
 7 function GetQueryValue(queryName) {
 8     var query = decodeURI(window.location.search.substring(1));//將url轉碼，如果不是當前地址鏈接，可以在這里填寫需要的鏈接
 9     var vars = query.split("&");//分割字符串，將url切割成數組形式的對象
10     for (var i = 0; i < vars.length; i++) {
11         var pair = vars[i].split("=");//再次分割成數組
12         if (pair[0] == queryName) { return pair[1]; }//如果匹配輸出結果
13     }
14     return null;
15 }

 

看一下結果：

1 var queryVal=GetQueryValue('name');
2 console.log(queryVal);// 張三

 

3、通過正則獲取到參數值；

 1 /**
 2  * [通過參數名獲取url中的參數值]
 3  * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=張三
 6  */
 7 function GetQueryValue1(queryName) {
 8     var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
 9     var r = window.location.search.substr(1).match(reg);
10     if ( r != null ){
11        return decodeURI(r[2]);
12     }else{
13        return null;
14     }
15  }

看一下結果：

1 var queryVal=GetQueryValue1('name');
2 console.log(queryVal);// 張三