JS根据key值获取URL中的参数值及把URL的参数转换成json对象

 更新时间:2015年08月26日 09:43:49   作者:love_zzh  
本篇文章主要围绕js url 参数值展开话题,js根据key值获取url中的参数值,接着把url的参数转换成json,感兴趣的朋友一起来学习吧,本文写的不好地方还望多多指出批评建议

不废话了,直接贴代码了,通过示例一讲解JS根据key值获取URL中的参数值及把URL的参数转换成json对象,示例二讲解js获取url传递参数,具体内容请看下文

示例一:

//把url的参数部分转化成json对象 

 parseQueryString: function (url) {
  var reg_url = /^[^\?]+\?([\w\W]+)$/,
   reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g,
   arr_url = reg_url.exec(url),
   ret = {};
  if (arr_url && arr_url[1]) {
   var str_para = arr_url[1], result;
   while ((result = reg_para.exec(str_para)) != null) {
    ret[result[1]] = result[2];
   }
  }
  return ret;
 }

// 通过key获取url中的参数值

 getQueryString: function (name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
 }

示例二:

js通过两种方法获取url传递参数:

js获取url传递参数方法一:

 这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET
函数:

<Script language="javascript">
function GetRequest() {
 
 var url = location.search; //获取url中"?"符后的字串
 var theRequest = new Object();
 if (url.indexOf("?") != -1) {
  var str = url.substr(1);
  strs = str.split("&");
  for(var i = 0; i < strs.length; i ++) {
   theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
  }
 }
 return theRequest;
}
</Script>

然后我们通过调用此函数获取对应参数值:

<Script language="javascript">
var Request = new Object();
Request = GetRequest();
var 参数1,参数2,参数3,参数N;
参数1 = Request[''参数1''];
参数2 = Request[''参数2''];
参数3 = Request[''参数3''];
参数N = Request[''参数N''];
</Script>

以此获取url串中所带的同名参数

js获取url传递参数方法二 正则分析法:

function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
  var r = window.location.search.substr(1).match(reg);
  if (r!=null) return (r[2]); return null;
}
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

其他参数获取介绍:

//设置或获取对象指定的文件名或路径。

alert(window.location.pathname);

//设置或获取整个 URL 为字符串。

alert(window.location.href);

//设置或获取与 URL 关联的端口号码。

alert(window.location.port);

//设置或获取 URL 的协议部分。

alert(window.location.protocol);

//设置或获取 href 属性中在井号“#”后面的分段。

alert(window.location.hash);

//设置或获取 location 或 URL 的 hostname 和 port 号码。

alert(window.location.host);

//设置或获取 href 属性中跟在问号后面的部分。

alert(window.location.search);

以上内容介绍了JS根据key值获取URL中的参数值及把URL的参数转换成json对象,js通过两种方式获取url传递参数,代码

非常简单,希望对大家有所帮助。

相关文章

  • js去字符串前后空格的实现方法

    js去字符串前后空格的实现方法

    这篇文章主要介绍了js去字符串前后空格的实现方法,重点推荐使用正则的方式,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 利用百度echarts实现图表功能简单入门示例【附源码下载】

    利用百度echarts实现图表功能简单入门示例【附源码下载】

    这篇文章主要介绍了利用百度echarts实现图表功能简单,结合简单示例形式分析了echarts插件的图标绘制功能相关实现技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2019-06-06
  • uni-app 项目中 “文件查找失败:‘crypto-js‘“ 的问题及解决方法

    uni-app 项目中 “文件查找失败:‘crypto-js‘“ 的问题及解决方法

    在开发使用 uni-app 框架的项目时,遇到依赖问题是常见的,本文将介绍如何解决编译过程中出现的 “文件查找失败:‘crypto-js’” 错误,并说明这种错误为什么会发生以及如何避免,下面分步骤给大家带来解决方案,感兴趣的朋友一起看看吧
    2024-07-07
  • js实现精美的银灰色竖排折叠菜单

    js实现精美的银灰色竖排折叠菜单

    这篇文章主要介绍了js实现精美的银灰色竖排折叠菜单,可实现页面左侧竖排的纵向折叠菜单效果,非常美观实用,需要的朋友可以参考下
    2015-05-05
  • 使用javascript控制cookie显示和隐藏背景图

    使用javascript控制cookie显示和隐藏背景图

    本文主要介绍了使用javascript来控制背景图片的显示和隐藏,当点击关闭按钮时,控制CSS使页面不加载背景图,同时记录COOKIE相关参数,并设置cookie的有效期
    2014-02-02
  • js如何实现元素曝光上报

    js如何实现元素曝光上报

    这篇文章主要介绍了js如何实现元素曝光上报,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • C#程序员入门学习微信小程序的笔记

    C#程序员入门学习微信小程序的笔记

    这篇文章主要给大家分享了一位C#程序员入门学习微信小程序的笔记,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • layui 地区三级联动 form select 渲染的实例

    layui 地区三级联动 form select 渲染的实例

    今天小编就为大家分享一篇layui 地区三级联动 form select 渲染的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • hash和history路由模式区别示例解析

    hash和history路由模式区别示例解析

    这篇文章主要为大家介绍了hash和history路由模式区别示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • JS防抖节流函数的实现与使用场景

    JS防抖节流函数的实现与使用场景

    在行走江湖的过程中,会出现很多性能优化的问题来让你手足无措,那么这篇文章主要给大家介绍了关于JS防抖节流函数的实现与使用场景,针对这两个问题来为你答疑解惑,需要的朋友可以参考下
    2021-07-07

最新评论