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判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
React服务端渲染原理解析与实践
Mar 04 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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP学习 变量使用总结
2011/03/24 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
js模块加载方式浅析
2017/08/12 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
vue内置指令详解
2018/04/03 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
python操作xml文件示例
2014/04/07 Python
python去除所有html标签的方法
2015/05/05 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python按比例随机切分数据的实现
2019/07/11 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
详解anaconda安装步骤
2020/11/23 Python
学校运动会广播稿范文
2014/10/02 职场文书
党建工作整改措施
2014/10/28 职场文书
大学生操行评语大全
2014/12/31 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
MySQL新手入门进阶语句汇总
2022/09/23 MySQL