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重要知识点小结
Nov 06 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
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
第十三节 对象串行化 [13]
2006/10/09 PHP
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
PHP学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
PHP反射API示例分享
2016/10/08 PHP
php四种定界符详解
2017/02/16 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
开业庆典主持词
2014/03/21 职场文书
经典团队口号
2014/06/06 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
党员个人党性分析材料
2014/12/18 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
MySQL快速插入一亿测试数据
2021/06/23 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis