http://www.aygfsteel.com/ebecket 返還網
          隨筆-140  評論-11  文章-131  trackbacks-0
          從網上看到一些使用js獲取QueryString的方法,但用起來不是很理想,所以決定自己寫一個。主要原理是使用正則表達式匹配location.search中的字符串。

          三個主要方法:

          方法

          說明

          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

          頁面加載時:

          clip_image001

          QueryString's name后的文本框中輸入要獲取的QueryString的名稱獲取相應的值:

          clip_image002

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

          clip_image003

          這樣就可以在頁面中方便的獲取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 :&nbsp;</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
          posted on 2010-03-22 15:40 becket_zheng 閱讀(491) 評論(0)  編輯  收藏 所屬分類: 網頁web前端技術
          主站蜘蛛池模板: 和田县| 高雄县| 房产| 蒲江县| 漠河县| 江口县| 英超| 宜阳县| 双峰县| 阿拉善左旗| 教育| 昌平区| 本溪| 富宁县| 泸西县| 广汉市| 海口市| 松阳县| 喀喇| 澄迈县| 平阴县| 高尔夫| 黄梅县| 鄂尔多斯市| 文安县| 江北区| 抚顺市| 什邡市| 西城区| 奉化市| 易门县| 西藏| 海盐县| 保康县| 儋州市| 龙门县| 措勤县| 天全县| 海阳市| 福清市| 宁德市|