唯品秀前端博客
当前位置: 前端开发 > JavaScript > JS获取网站地址栏URL中的参数值并转换成json对象

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

2018-05-15 分类：JavaScript 作者：管理员 阅读（2599）

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

开始转化

1
2
3
4
5
6
7
8
9
10
11
12
var baseUrl = function GetRequest() {       
    var theRequest = new Object(); 
        var url = location.search;  //获取url中"?"符后的字符串
    if (url.indexOf("?") != -1) {  
        var strs = url.split("&");  
        for (var i = 0; i < strs.length; i++) {   
            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);  
        } 
    } 
    return theRequest;
}
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);

「两年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(8) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
赏 8

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签：

上一篇：

下一篇：

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

博客简介

唯品秀博客: weipxiu.com，一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，愿景：成为宇宙中最具有代表性的前端博客，期待您的参与 

最近更新

随机文章

热门标签

本站公告 阿里CDN CDN大全 博主Github 百度统计 百度收录 关键词排名 经典Css片段 时间戳格式化 全国黑企名单 武汉黑企名单 996.ICU火了 Js33个概念 vConsole DSBridge DOM元素进屏 Shareinstall Http接口测试

精彩评论

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 220 篇
  • 草稿数目： 0 篇
  • 分类数目： 14 个
  • 独立页面： 6 个
  • 评论总数： 969 条
  • 链接总数： 13 个
  • 标签总数： 406 个
  • 建站时间： 950 天
  • 注册用户： 1417 人
  • 访问总量： 8708424 次
  • 最近更新： 2019年7月17日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺在线

点击这里给我发消息
点击这里给我发消息