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

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

2018-05-15 分类:JavaScript 作者:管理员 阅读(3574)

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

开始转化

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

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

赞(9) 打赏

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

支付宝
微信
9

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

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

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

博客简介

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

精彩评论

友情链接

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

站点统计

  • 文章总数: 242 篇
  • 草稿数目: 0 篇
  • 分类数目: 15 个
  • 独立页面: 6 个
  • 评论总数: 871 条
  • 链接总数: 14 个
  • 标签总数: 432 个
  • 建站时间: 1062 天
  • 注册用户: 3456 人
  • 访问总量: 8667558 次
  • 最近更新: 2019年11月11日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线