您的位置:58脚本 > js根据key获取value JS根据key值获取URL中的参数值

js根据key获取value JS根据key值获取URL中的参数值

2023-04-03 21:32 JSON教程

js根据key获取value JS根据key值获取URL中的参数值

js根据key获取value JS根据key值获取URL中的参数值

js根据key获取value

本文提供了两个实例,其中,示例一讲解JS根据key值获取URL中的参数值及把URL的参数转换成json对象;示例二讲解js获取url传递参数,具体介绍内容请看下文:

示例一:

//把url的参数部分转化成json对象
parseQueryString: function (url) {
 var reg_url = /^[^?]+?([wW]+)$/,
  reg_para = /([^&=]+)=([wW]*?)(&|$|#)/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如何获取url所传递的参数和参数值

大家知道可以使用url传递参数值,本站几乎随便一个链接都会有传值,既然要传递值,那么自然要获取,否则就没有任何意义了,下面就通过实例介绍一下如何使用javascript获取url传递的参数和参数值。

代码实例如下:

[javascript]
(function(){   
  var urlToObject=function(url){   
    var urlObject = {};   
    if (/?/.test(url)){   
      var urlString=url.substring(url.indexOf("?")+1);   
      var urlArray=urlString.split("&");   
      for(var i=0,len=urlArray.length;i<len;i++){   
        var urlItem=urlArray[i];   
        var item = urlItem.split("=");   
        urlObject[item[0]]=item[1];   
      }   
      return urlObject;   
    }   
  };   
  var testUrl="http://softwhy.com/index.php?a=0&b=1&c=2";   
  var result=urlToObject(testUrl);   
  for (var key in result){   
    console.log(key+"="+result[key]);   
  }   
})(); 
以上代码可以输出url的参数和对应的参数值,下面就介绍一下实现过程。


一.实现原理:
1.判断url是否含有参数。在本代码中使用正则表达式if(/?/.test(url))判断url中是否含有?,如果含有问号,那么就说明此链接中含有参数,然后执行if语句中的代码。
2.获取url中的参数和参数值。在这里是使用split()函数分割字符串,依次实现此功能。


二.代码注释:
1.(function(){})(),声明一个匿名函数并执行。
2.var urlToObject=function(url){},声明一个函数,此函数的参数是一个超链接。
3.var urlObject={},声明一个对象直接量。
4.if(/?/.test(url)) ,判断链接中是否含有?,也就是是否含有参数。
5.var urlString=url.substring(url.indexOf("?")+1),截取url问号只有的字符串。
6.var urlArray=urlString.split("&"),使用split()函数以&为标记分割字符串,并生成一个数组。这样每一个数组元素就是一个参数和参数值对。
7.for(var i=0,len=urlArray.length;i<len;i++),使用for循环遍历urlArray数组。
8.var urlItem=urlArray,将指定索引的数组值赋值给变量urlItem。
9.var item=urlItem.split("="),再使用=分割字符串并生成一个数组,因为urlArray数组每一个元素都是一个参数和参数值对,例如"a=0",这样再经过分割,生成新数组的第一项就是参数名称,第二个项就是参数值。
10.urlObject[item[0]]=item[1],将参数名称作为对象的属性名称,参数值作为对象的属性值。
11.return urlObject,返回对象。
12.var testUrl=http://softwhy.com/index.php?a=0&b=1&c=2,用作测试的url。
13.var result=urlToObject(testUrl),将参数和参数值转换成对象的属性和属性值,并返回此对象。
14.for(var key in result),遍历此对象.

阅读全文
以上是58脚本为你收集整理的js根据key获取value JS根据key值获取URL中的参数值全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  • htmlform的属性 HTML DOM Submit form 属性

    htmlform的属性 HTML DOM Submit form 属性

    Submit form 属性 Submit 对象定义和用法form 属性可返回对包含该确认按钮的表单的引用。若成功,该属性返回一个表单对象。语法s...

  • html script属性 HTML DOM Script src 属性

    html script属性 HTML DOM Script src 属性

    Script src 属性 Script 对象实例获取外部脚本的 URL:var x = document.getElementById("myScript").srcx 输出结果为://www..c...

  • html dom方法 HTML DOM 方法

    html dom方法 HTML DOM 方法

    HTML DOM 方法 HTMLDOM方法是我们可以在节点(HTML 元素)上执行的动作,学习HTMLDOM方法对您学习HTMLDOM是必不可少的,开始您的...

  • sass if Sass @if指令

    sass if Sass @if指令

    描述@if指令接受SassScript表达式,并且只要表达式的结果为false或null以外的任何结果,就使用嵌套样式。语法@if expression {//...

  • 变量 声明 1-1. 变量声明

    变量 声明 1-1. 变量声明

    sass变量的声明和css属性的声明很像:$highlight-color: #F90;这意味着变量$highlight-color现在的值是#F90。任何可以用作css属性...

  • less 编译 Less 在线编译器

    less 编译 Less 在线编译器

    本节为大家介绍几款好用的Less在线编译器。在线编译器用于将较少的代码编译为css代码。在线编译器工具很容易帮助生成CSS代码。提...

  • .less文件 Less 扩展

    .less文件 Less 扩展

    Extend是一个LESS伪类,它通过使用:extend 选择器在一个选择器中扩展其他选择器样式。例子以下示例演示如何在LESS文件中使用 ext...

  • css3 阴影 CSS3阴影实现方法及技巧全解

    css3 阴影 CSS3阴影实现方法及技巧全解

    网页设计中常常要用到阴影的效果,通过阴影可以比较容易突出一个元素,在没有CSS3的时候,一般都用图片做阴影效果,而现在通过使...

  • css3背景透明 CSS3 背景

    css3背景透明 CSS3 背景

    CSS3更新了几个新的背景属性,提供更大背景元素控制,通过这几个背景属性,您能够做出更加精美的样式。在本节中您将了解以下4种...

  •  CSS Text(文本)

    CSS Text(文本)

    CSS Text文本格式通过 CSS 的 Text 属性,你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等,你...

© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS