获取url后面的参数以及参数值
2024-05-09 00:46:22
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
}
烟花易冷，保持愉悦！
获取url后面的参数以及参数值相关推荐
- js 获取URL后面的参数
1.有时间由于缓存问题,用PHP可能就不是太好处理,所以可以用客户端进行URL的处理 如下:js 获取URL后面的参数 <script> function getUrlParam(name ...
- javaScript获取url中的参数
var urlTools = {//获取RUL参数值getUrlParam: function(name) { /*?videoId=identification */var params = dec ...
- 如何获取url中的参数并传递给iframe中的报表
在使用报表软件时,用户系统左边一般有目录树,点击报表节点就会在右侧网页的iframe中显示出报表,同时点击的时候也会传递一些参数给网页,比如时间和用户信息等.如何使网页中的报表能够获取到传递过来的参数 ...
- js获取url中的参数
window.location: window的location对象 window.location.href 整个URl字符串(在浏览器中就是完整的地址栏) window.location.prot ...
- 如何获取URL中的参数
获取URL中的参数 1. 使用JS函数获取URL参数 使用示例 2. Angular应用中,从URL中获取参数信息的方法 使用示例 ActivatedRoute属性 1. 使用JS函数获取URL参数 ...
- html获取url上的参数
//获取url上的参数 function getQueryString(name) {var reg = new RegExp("(^|&)" + name + " ...
- js 获取url多个参数
1.js获取单个参数 js获取url传递里面的参数 url="http://t.html?id=151"; var url = window.location.href; var ...
- android 获取url中的参数，验证邮箱格式，截取字符串中键值对的值，String的字节长度，去空格，替换字符
String ss="hello"; byte[] buff=ss.getBytes(); int f=buff.length; System.out.println(f); 字节 ...
- JS获取url多个参数及解决中文乱码问题
JS获取url多个参数及解决中文乱码问题 参考文章: (1)JS获取url多个参数及解决中文乱码问题 (2)https://www.cnblogs.com/weimingxin/p/7349564.h ...
最新文章
- NHibernate之Generator主键生成方式
- 石头扫地机器人离线了怎么办_关于激光头故障，石头扫地机器人无限次复活记！...
- 到现在了还不会Webpack？我帮你总结好了
- BeetleX.FastHttpApi之JWT和自定义访问验证
- 推荐]招商就象谈恋爱
- SpringBoot 工程目录 整合mybatis-mysql(注解类型)
- Android源码下载
- 逆向破解crackme简要分析
- 01.【设计模式】工厂模式
- C# 二维码 生成、解析
- 【大数据面试题】（五）Spark 相关面试题总结
- 2015美国大学计算机科学专业排名,2015年US News美国大学计算机专业排名
- Hyper-V 和 VMWare 终于可以无缝共存、同时运行了
- 员工半夜被微信告知公司解散| 工资未发、押金未退，共享宝马走向破产…
- Cisco Packet Tracer 典型校园网搭建
- 运行npm install webpack -g 出现 4048错误
- 【Echarts】关于关闭点击地图时显示黄色的方法
- 2.1 reverse
- 44-咸鱼学Java-通配符
- vue基础之常用特性