使用js獲取QueryString的方法小結


一.<script> urlinfo=window.location.href; //獲取當前頁面的url len=urlinfo.length;//獲取url的長度 offset=urlinfo.indexOf("?");//設置參數字符串開始的位置 newsidinfo=urlinfo.substr(offset,len)//取出參數字符串 這里會獲得類似“id=1”這樣的字符串 newsids=newsidinfo.split("=");//對獲得的參數字符串按照“=”進行分割 newsid=newsids[1];//得到參數值 alert("您要傳遞的參數值是"+newsid); < /script>

二.更好的方法: 聲明一個queryString函數 <script type="text/javascript"> Request = { QueryString : function(item){ var svalue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)","i")); return svalue ? svalue[1] : svalue; } } < /script>

使用的時候像java一樣調用就行了: <script type="text/javascript"> document.write( Request.QueryString("name") ); < /script>

 

下面是另種方法:

本文原理是使用正則表達式匹配location.search中的字符串。其中三個主要函數為 getQueryString()、getQueryStringByName(name)和getQueryStringByIndex(index) 

三個主要方法:

 

方法

說明

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"));  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=gb2312" http-equiv="Content-Type" />  <title>QueryString獲取演示代碼 www.jb51.net</title>  <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 : </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> 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM