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);// 张三