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 23 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
node.js从数据库获取数据
May 08 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
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
mayfish 数据入库验证代码
2010/04/30 PHP
php中socket的用法详解
2014/10/24 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
python数据清洗系列之字符串处理详解
2017/02/12 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python处理大日志文件
2019/07/23 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
关于python中的xpath解析定位
2020/03/06 Python
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
四群教育工作实施方案
2014/03/26 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle