获取url后面的参数以及参数值
1、获取url地址后的值(包含?)window.location.search; //获取url中"?"符后的字符串比如url 为: https://editor.csdn.net/md/?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238let query = window.location.se
·
1、获取url地址后的值(包含?)
window.location.search; //获取url中"?"符后的字符串
比如url 为: https://editor.csdn.net/md/?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238
let query = window.location.search;
console.log(query)
// ?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238
2、操作字符串
let url = "?userName=magic4j&userId=547ac1d0-385b-4219-95fa-e7964b893ee4&id=238"
// 判断是否有问号
if (url.indexOf("?") != -1) {
// 把问号去掉
var str = url.substr(1);
// 以&符分项组成数组
strs = str.split("&");
// 循环数组
for (var i = 0; i < strs.length; i++) {
// 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
3、decodeURI() 函数 (官方文档:https://www.runoob.com/jsref/jsref-decodeuri.html)
var test1="%E9%BE%99";
test1=escape(test1);
document.write (test1 + "<br />") ;
test1=decodeURI(test1);
document.write (test1 + "<br />")
4、结果如图:
5、完整代码:
getRequest() {
let url = window.location.search;
let 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]);
// 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
},
async getList(time, tab) {
this.isData = true;
this.data = await this.getRequest(); // 获取url后面的参数对象
axios.get('/app/api/sw/station/chart/list?', {
headers: {
'userName': this.data.userName,
'userId': this.data.userId,
'userMoblie': this.data.userMoblie
},
params: {
fast: time,
id: this.data.id,
}
})
.then(res => {
if (res.data.code == 200) {
this.stationCode = res.data.data.stationCode;
this.tabList = res.data.data.stationChartVos;
// 当前tab下的对象数据
if (this.tabList.length > 0) {
// 默认第一项
if (this.tabName == "") {
this.tabName = this.tabList[0].name;
}
this.dataObj = this.tabList[tab];
this.getOption(this.tabList[tab]);
} else {
this.dataObj = {}
this.getOption([])
}
this.isData = false;
} else {
this.getOption([]);
this.dataObj = {};
this.isData = false;
}
})
.catch(res => {
this.getOption([]);
this.dataObj = {};
this.isData = false;
})
},
6、其它参数获取:
1、设置或获取 href 属性中在井号“#”后面的分段。(window.location.hash)
如url为:"https://ja31hg.axshare.com/#id=dxpi19&p=%E9%A6%96%E9%A1%B5%E5%91%8A%E8%AD%A6%E4%BF%A1%E6%81%AF%E6%B5%8B%E8%BE%B9%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%EF%BC%88%E6%96%B0%EF%BC%89&g=1"
alert(window.location.hash) // #id=dxpi19&p=%E9%A6%96%E9%A1%B5%E5%91%8A%E8%AD%A6%E4%BF%A1%E6%81%AF%E6%B5%8B%E8%BE%B9%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%EF%BC%88%E6%96%B0%EF%BC%89&g=1
2、设置或获取 URL 的协议部分。(window.location.protocol)
alert(window.location.protocol); // https:
3、设置或获取对象指定的文件名或路径。(window.location.pathname)
alert(window.location.pathname); // /
4、设置或获取整个 URL 为字符串。(window.location.href)
alert(window.location.href); // https://ja31hg.axshare.com/#id=dxpi19&p=%E9%A6%96%E9%A1%B5%E5%91%8A%E8%AD%A6%E4%BF%A1%E6%81%AF%E6%B5%8B%E8%BE%B9%E4%BF%A1%E6%81%AF%E5%B1%95%E7%A4%BA%EF%BC%88%E6%96%B0%EF%BC%89&g=1
5、设置或获取与 URL 关联的端口号码。(window.location.port)
alert(window.location.port); // " "
6、设置或获取 href 属性中跟在问号后面的部分。(window.location.search)
alert(window.location.search); // " "
7、设置或获取 location 或 URL 的 hostname 和 port 号码。(window.location.host)
alert(window.location.host); // ja31hg.axshare.com
7、解析 url 中的参数,得到对象形式key: value
/**
* 解析 url 中的参数
* @param url
* @returns {Object}
*/
function parseUrlParams(url) {
const params = {}
if (!url || url === '' || typeof url !== 'string') {
return params
}
const paramsStr = url.split('?')[1]
if (!paramsStr) {
return params
}
const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
for (let i = 0; i < paramsArr.length / 2; i++) {
const value = paramsArr[i * 2 + 1]
params[paramsArr[i * 2]] =
value === 'true' ? true : value === 'false' ? false : value
}
return params
}
烟花易冷,保持愉悦!
更多推荐
已为社区贡献13条内容
所有评论(0)