使用js获取QueryString

本文PDF下载

      转载请注明出处 

    从网上看到一些使用js获取QueryString的方法,但用起来不是很理想,所以决定自己写一个。主要原理是使用正则表达式匹配location.search中的字符串。

三个主要方法:

方法

说明

getQueryString

获取QueryString的数组。

例如路径QueryStringDemo.html?id=5&type=1&flag=0

调用后返回["id=5", "type=1", "flag=0"]

getQueryStringByName

根据QueryString参数名称获取值

getQueryStringByIndex

根据QueryString参数索引获取值

  

//获取QueryString的数组

function getQueryString(){

     var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g")); 

     if(result == null){

         return "";

     }

     for(var i = 0; i < result.length; i++){

         result[i] = result[i].substring(1);

     }

     return result;

}

//根据QueryString参数名称获取值

function getQueryStringByName(name){

     var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));

     if(result == null || result.length < 1){

         return "";

     }

     return result[1];

}

//根据QueryString参数索引获取值

function getQueryStringByIndex(index){

     if(index == null){

         return "";

     }

     var queryStringList = getQueryString();

     if (index >= queryStringList.length){

         return "";

     }

     var result = queryStringList[index];

     var startIndex = result.indexOf("=") + 1;

     result = result.substring(startIndex);

     return result;

}

测试页面路径:QueryStringDemo.html?id=5&type=1&flag=0

页面加载时:

 技术分享

在QueryString‘s name后的文本框中输入要获取的QueryString的名称获取相应的值:

 技术分享

在QueryString‘s index后的文本框中输入要获取的QueryString的索引获取相应的值(索引从0开始):

 技术分享

这样就可以在页面中方便的获取QueryString的值了。最后附上测试页面QueryStringDemo.html的源代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>QueryString获取</title>

<!--script type="text/javascript" src="CommonFiles/sunnycoder.js"></script-->

<script type="text/javascript">

     //获取QueryString的数组

     function getQueryString(){

         var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g"));

         for(var i = 0; i < result.length; i++){

              result[i] = result[i].substring(1);

         }

         return result;

     }

     //根据QueryString参数名称获取值

     function getQueryStringByName(name){

         var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));

         if(result == null || result.length < 1){

              return "";

         }

         return result[1];

     }

     //根据QueryString参数索引获取值

     function getQueryStringByIndex(index){

         if(index == null){

              return "";

         }

         var queryStringList = getQueryString();

         if (index >= queryStringList.length){

              return "";

         }

         var result = queryStringList[index];

         var startIndex = result.indexOf("=") + 1;

         result = result.substring(startIndex);

         return result;

     }

     //绑定当控件高亮选中时,点击“回车键”时执行的操作

     //control:要绑定事件的控件

     //func:要执行的方法

     function bindEnterEvent(control, func){

         control.onkeypress = function(){

              if (event.keyCode == 13){

                   func();

              }

         }

     }

     //根据输入的QueryString名称获取值

     function getByName(){

         var name = document.getElementById("txtQueryStringName").value;

         document.getElementById("txtResult").innerHTML = getQueryStringByName(name);

     }

     //根据输入的QueryString的索引获取值

     function getByIndex(){

         var index = document.getElementById("txtQueryStringIndex").value;

         document.getElementById("txtResult").innerHTML = getQueryStringByIndex(index);

     }

</script>

</head>

 

<body>

 

<div>

     <span>QueryString : </span><span id="queryString"></span>

</div>

<div>

     <span>QueryString‘s name :&nbsp;</span>

     <input id="txtQueryStringName" name="txtQueryStringName" type="text" />

     <input name="btnGetByName" type="button" value="获取" onclick="getByName()" />

</div>

<div>

     <span>QueryString‘s index : </span>

     <input id="txtQueryStringIndex" name="txtQueryStringIndex" type="text" />

     <input name="btnGetByIndex" type="button" value="获取" onclick="getByIndex()" />

 

</div>

<div>

     <span>结果 :</span><span id="txtResult"></span>

</div>

<!--页面加载时执行的操作-->

<script type="text/javascript">

     //显示所有QueryString

     document.getElementById("queryString").innerHTML = getQueryString();

     //为txtQueryStringName绑定回车事件

     bindEnterEvent(txtQueryStringName, getByName);

     //为txtQueryStringIndex绑定回车事件

     bindEnterEvent(txtQueryStringIndex, getByIndex);

</script>

</body>

 

</html>

 文章来源:使用js获取QueryString

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。