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 相关文章推荐
JavaScript中的排序算法代码
Feb 22 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP与以太坊交互详解
2018/08/24 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
2013/10/21 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
axios学习教程全攻略
2017/03/26 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
python实现图片批量剪切示例
2014/03/25 Python
python实现按任意键继续执行程序
2016/12/30 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
自荐信格式简述
2014/01/25 职场文书
小学防溺水制度
2014/01/29 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
图书馆标语
2014/06/19 职场文书
检讨书范文500字
2015/01/28 职场文书
2015年护士节活动总结
2015/02/10 职场文书
个人年终总结范文
2015/03/09 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年护士节慰问信
2015/03/23 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
培根随笔读书笔记
2015/07/01 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电