|
|
三個主要方法：
方法 | 說明 |
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>
pdf版下載地址
JavaScript技術：使用js獲取QueryString的方法小結，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
