使用js獲取QueryString的方法小結(jié)
三個(gè)主要方法:
方法 |
說明 |
getQueryString |
獲取QueryString的數(shù)組。 例如路徑QueryStringDemo.html?id=5&type=1&flag=0 調(diào)用后返回["id=5", "type=1", "flag=0"] |
getQueryStringByName |
根據(jù)QueryString參數(shù)名稱獲取值 |
getQueryStringByIndex |
根據(jù)QueryString參數(shù)索引獲取值 |
//獲取QueryString的數(shù)組
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;
}
//根據(jù)QueryString參數(shù)名稱獲取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根據(jù)QueryString參數(shù)索引獲取值
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;
}
測(cè)試頁(yè)面路徑:QueryStringDemo.html?id=5&type=1&flag=0
頁(yè)面加載時(shí):

在QueryString's name后的文本框中輸入要獲取的QueryString的名稱獲取相應(yīng)的值:

在QueryString's index后的文本框中輸入要獲取的QueryString的索引獲取相應(yīng)的值(索引從0開始):

這樣就可以在頁(yè)面中方便的獲取QueryString的值了。最后附上測(cè)試頁(yè)面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.dbjr.com.cn</title>
<script type="text/javascript">
//獲取QueryString的數(shù)組
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;
}
//根據(jù)QueryString參數(shù)名稱獲取值
function getQueryStringByName(name){
var result = location.search.match(new RegExp("[\?\&]" + name+ "=([^\&]+)","i"));
if(result == null || result.length < 1){
return "";
}
return result[1];
}
//根據(jù)QueryString參數(shù)索引獲取值
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;
}
//綁定當(dāng)控件高亮選中時(shí),點(diǎn)擊“回車鍵”時(shí)執(zhí)行的操作
//control:要綁定事件的控件
//func:要執(zhí)行的方法
function bindEnterEvent(control, func){
control.onkeypress = function(){
if (event.keyCode == 13){
func();
}
}
}
//根據(jù)輸入的QueryString名稱獲取值
function getByName(){
var name = document.getElementById("txtQueryStringName").value;
document.getElementById("txtResult").innerHTML = getQueryStringByName(name);
}
//根據(jù)輸入的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>結(jié)果 :</span><span id="txtResult"></span>
</div>
<!--頁(yè)面加載時(shí)執(zhí)行的操作-->
<script type="text/javascript">
//顯示所有QueryString
document.getElementById("queryString").innerHTML = getQueryString();
//為txtQueryStringName綁定回車事件
bindEnterEvent(txtQueryStringName, getByName);
//為txtQueryStringIndex綁定回車事件
bindEnterEvent(txtQueryStringIndex, getByIndex);
</script>
</body>
</html>
pdf版下載地址
- JS獲取URL中參數(shù)值(QueryString)的4種方法分享
- js獲取URL的參數(shù)的方法(getQueryString)示例
- node.js中的querystring.parse方法使用說明
- node.js中的querystring.stringify方法使用說明
- JavaScript實(shí)現(xiàn)QueryString獲取GET參數(shù)的方法
- NodeJS學(xué)習(xí)筆記之(Url,QueryString,Path)模塊
- JavaScript QueryString解析類代碼
- node.js中的querystring.escape方法使用說明
- node.js中的querystring.unescape方法使用說明
- JavaScript獲取URL中參數(shù)querystring的方法詳解
相關(guān)文章
javascript小數(shù)計(jì)算出現(xiàn)近似值的解決辦法
在javascript里面,小數(shù)只能進(jìn)行相似計(jì)算,例如:5.06+1.30,你得到的結(jié)果會(huì)是6.359999999999999,但有的小數(shù)計(jì)算又是正確的,如果計(jì)算出現(xiàn)了近似值,你可以用如下的方法計(jì)算。2010-02-02實(shí)現(xiàn)非常簡(jiǎn)單的js雙向數(shù)據(jù)綁定
Angular實(shí)現(xiàn)了雙向綁定機(jī)制。所謂的雙向綁定,無非是從界面的操作能實(shí)時(shí)反映到數(shù)據(jù),數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。本文給大家詳細(xì)介紹js雙向數(shù)據(jù)綁定,感興趣的朋友參考下2015-11-11原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框功能,本段代碼是基于js 與css實(shí)現(xiàn)的,感興趣的朋友跟隨小編一起看看吧2019-12-12JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)touch 點(diǎn)擊滑動(dòng)輪播實(shí)例代碼,需要的朋友可以參考下2017-01-01