JS获取网站地址栏URL中的参数值并转换成json对象

2018-05-15 分类：JavaScript 作者：管理员阅读（6732）

这个问题其实是个很常见的问题，而且在面试中也会经常被提起，其实想实现这个需求也比较简单，就是考察下对数据交互处理基本操作。

开始转化

1
2
3
4
5
6
7
8
9
10
11
12

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

最终结果

注意地址栏带#

在vue默认hash路由情况下上面方式是不行的，因为location.search获取不到带#地址栏想要的字符串信息，修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

var baseUrl = function GetRequest() {
var theRequest = new Object();
if (location.href.indexOf("?") != -1) {
var newUrl = location.hash.split("?");
newUrl.splice(0,1);
var strs = newUrl.join().split("&")
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
return theRequest;
}
console.log('1',baseUrl())

常见获取地址栏信息几个方法

1
2
3
4
5
6
7
8

//设置或获取整个 URL 为字符串。
alert(window.location.href);

//设置或获取 href 属性中在井号“#”后面的分段。
alert(window.location.hash);

//设置或获取 href 属性中跟在问号后面的部分。
alert(window.location.search);

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」