三個主要方法:
方法 |
說明 |
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 : </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> |
轉自
http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html