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

作者：管理员 2018-05-15 14:52:37 分类：JavaScript 阅读（7900） 0

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

开始转化

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

function baseUrl() {
var newObj = new Object();
var url = location.search; //获取url中"?"符后的字符串
if (url.indexOf("?") != -1) {
var strs = url.split("&");
for (var i = 0; i < strs.length; i++) {
newObj[strs[i].split("=")[0]] = (strs[i].split("=")[1]) || '';
}
}
return newObj;
}
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);

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com

赞(10) 打赏

标签：

Json url参数地址栏

上一篇：关于js函数节流与函数防抖【完美解决】

下一篇：javascript中apply、call和bind的区别汇总实例详解

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

开始转化

最终结果

注意地址栏带#

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

相关推荐

共 0 条评论关于"JS获取网站地址栏URL中的参数值并转换成json对象"

点击取消