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

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

这个问题其实是个很常见的问题，而且在面试中也会经常被提起，其实想实现这个需求也比较简单，就是考察下对数据交互处理基本操作，文章后面还会介绍到对应的qs.js插件来帮我们在项目中快速实现解决问题

另外qs.js是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object，而且支持复杂的嵌套。它上手很容易

开始转化

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())

qs.js插件

在很多现代框架中，人们习惯于通过一些库来解决常见问题，例如我们可以通过qs.js很轻松就能解析实现上面方法功能，在这里我们列举该插件最常见的两个方法qs.stringify()和JSON.stringify()

安装使用

1 2	npm install qs -save import qs from 'qs';

qs.parse基本用法

qs.parse 方法可以把一段格式化的字符串转换为对象格式，比如：

1
2
3
4
5
6
7
8
9
10

let url = 'https://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
let data = qs.parse(url.split('?')[1]);
// data的结果是
{
a: 1,
b: 2,
c: '',
d: xxx,
e: ''
}

qs.stringify基本用法

qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。

1
2
3
4
5

let params = { c: 'b', a: 'd' };
qs.stringify(params)

// 结果是
'c=b&a=d'

ignoreQueryPrefix和addQueryPrefix

ignoreQueryPrefix这个参数可以自动帮我们过滤掉location.search前面的❓，然后再解析，addQueryPrefix设为true可以在序列化的时候给我们加上?

1
2
3
4
5
6
7

// 解析
Qs.parse('?x=1') // {?x: "1"}
Qs.parse('?x=1', {ignoreQueryPrefix: true}) // {x: "1"}

// 序列化
Qs.stringify({x: "1"}) // x=1
Qs.parse({x: "1"}, {addQueryPrefix: true}) // ?x=1

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

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 qs库 url参数地址栏

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

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