在页面传值的时候,经常使用到方法就是url后面通过?拼接参数,再结合&可以实现多个参数的传递,例如
http://www.test.com?a=123&b=xyz&b=456
传参不难,只需要按照格式拼接起来,难点在于如何获取拼接好的参数,以上面为例,也就是获取?a=123&b=xyz&c=456这部分内容
使用window.location.search!对,原生的这个api可以获取到?以及后面的参数值,但是不友好的地方在于获取的是字符串,给我们这么一坨东西没用啊,我们需要的东西在这字符串之中,所以我们需要处理一下这个字符串,处理成什么格式做好用呢?对象!
因为在js中,万物皆对象~这里就给大家罗列两种方法(当然不止两种,还有很多方式可以处理,找到一两种好理解,好记忆,灵活处理各种问题的方法才是硬道理)
第一种(推荐)
使用replace()和queryString.parse();
replace()方法可以使用其他的代替,目的是去掉字符串中的?
// http://www.test.com?a=123&b=xyz&b=456
//先引入
import queryString from 'querystring';
const url=window.location.search;
const data=url.replace('?', '');
const param = queryString.parse(data);
//最后结果
param = {
a:'123',
b:['xyz','456']
}
//合并
const param= queryString.parse(url.replace('?', ''));
第二种 (推荐)
使用一个非常好用的api-----URLSearchParams
// http://www.test.com?a=123&b=xyz&c=456
const params=new URLSearchParams(location.search);
//最后结果想获取那个参数直接get
const a = params.get("a") // 123
const b = params.get("b") // xyz
const c = params.get("b") // 456
第三种(可行)
split拆分法
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];