唯品秀前端博客

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

开始转化

1
2
3
4
5
6
7
8
9
10
11
12
function baseUrl() {
    var newObj = new Object();
    var url = location.search; //获取url中"?"符后的字符串
    if (url.indexOf("?") != -1) {
        var strs = url.split("&");
        for (var i = 0; i < strs.length; i++) {
            newObj[strs[i].split("=")[0]] = (strs[i].split("=")[1]) || '';
        }
    }
    return newObj;
}
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);
本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(10) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

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

表情

最新评论

    暂无留言哦~~