JavaScript获取URL中参数querystring的方法详解


Posted in Javascript onOctober 11, 2016

一. 获取url的querystring参数

获取url的querystring参数的两种方法如下:

1.1 方法一:正则匹配

//获取url中的参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数
  var result = window.location.search.substr(1).match(reg); // 对querystring匹配目标参数
  if (result != null) {
    return decodeURIComponent(result[2]);
  } else {
    return null;
  }
}

对于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url,获取 q1 参数值的方法如下:

var q1 = getQueryString('q1'); // abc

1.2 方法二:split

function getQueryString() {  
  var qs = location.search.substr(1), // 获取url中"?"符后的字串  
    args = {}, // 保存参数数据的对象
    items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
    item = null,
    len = items.length;

  for(var i = 0; i < len; i++) {
    item = items[i].split("=");
    var name = decodeURIComponent(item[0]),
      value = decodeURIComponent(item[1]);
    if(name) {
      args[name] = value;
    }
  }
  return args;
}

对于 http://localhost/index.html?q1=abc&q2=efg&q3=h 的url,获取 q1 参数值的方法如下:

var qs = getQueryString(); 

var q1 = qs["q1"]; // abc

用上面两种getQueryString()方法都能很好地解决获取url的querystring参数问题。就此顺便整理一下Location对象,方便日后学习参考。

二. Location对象的属性

备注:以 http://localhost:80/dir/index.html?q1=abc&q2=efg&q3=h#anchor 为例:

JavaScript获取URL中参数querystring的方法详解

location的这8个属性都是可读写的。

其中,改变location.href会跳转到新的URL页面,而修改location.hash会跳到当前页面中锚点位置。

每次修改window.location的属性(hash除外),页面都会以新的URL重新加载,并在浏览器的历史纪录中生成一条新纪录。

三. Location对象的方法

JavaScript获取URL中参数querystring的方法详解

其中,location.assign(url) 的效果跟下列两行代码的效果完全一样:

window.location = url;
location.href = url;

位于 location.reload() 调用之后的代码可能会也可能不会执行,这取决于网络延迟或系统资源等因素。因此,最好将 location.reload() 放在代码的最后一行。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 #Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 #Javascript
javascript 动态样式添加的简单实现
Oct 11 #Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 #Javascript
javascript 动态脚本添加的简单方法
Oct 11 #Javascript
js HTML5上传示例代码完整版
Oct 10 #Javascript
JavaScript  event对象整理及详细介绍
Oct 10 #Javascript
You might like
PHP数组及条件,循环语句学习
2012/11/11 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
jQuery实现左右切换焦点图
2015/04/03 Javascript
js实现微信分享代码
2020/10/11 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
详解nvm管理多版本node踩坑
2019/07/26 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
详解Python中的四种队列
2018/05/21 Python
python的pip安装以及使用教程
2018/09/18 Python
python判断输入日期为第几天的实例
2018/11/13 Python
彻底理解Python中的yield关键字
2019/04/01 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
如何基于python实现不邻接植花
2020/05/01 Python
Css3实现无缝滚动防抖
2020/09/14 HTML / CSS
HTML5文档结构标签
2017/04/21 HTML / CSS
机关党员三严三实心得体会
2014/10/13 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
圣诞晚会主持词
2015/07/01 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python