一.<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>