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

          三個主要方法:

          方法

          說明

          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")); 

               if(result == null){

                   return "";

               }

               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;

          }

          測試頁面路徑:QueryStringDemo.html?id=5&type=1&flag=0

          頁面加載時:

          clip_image001

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

          clip_image002

          QueryString's index后的文本框中輸入要獲取的QueryString的索引獲取相應(yīng)的值(索引從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的數(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)控件高亮選中時,點擊回車鍵時執(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 :&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>結(jié)果 :</span><span id="txtResult"></span>

          </div>

          <!--頁面加載時執(zhí)行的操作-->

          <script type="text/javascript">

               //顯示所有QueryString

               document.getElementById("queryString").innerHTML = getQueryString();

               //txtQueryStringName綁定回車事件

               bindEnterEvent(txtQueryStringName, getByName);

               //txtQueryStringIndex綁定回車事件

               bindEnterEvent(txtQueryStringIndex, getByIndex);

          </script>

          </body>

           

          </html>


          轉(zhuǎn)自
          http://www.cnblogs.com/sunnycoder/archive/2010/02/28/1674998.html
          posted on 2010-03-22 15:40 becket_zheng 閱讀(492) 評論(0)  編輯  收藏 所屬分類: 網(wǎng)頁web前端技術(shù)
          主站蜘蛛池模板: 柳江县| 陆良县| 塔城市| 普格县| 手游| 西充县| 贵定县| 梅河口市| 赤峰市| 闻喜县| 瓦房店市| 新田县| 开远市| 奇台县| 白朗县| 克东县| 睢宁县| 塘沽区| 吴桥县| 连山| 龙岩市| 湖州市| 应用必备| 周至县| 太湖县| 肃北| 来宾市| 开封市| 舒兰市| 理塘县| 平谷区| 那曲县| 阿克| 逊克县| 云安县| 眉山市| 富源县| 裕民县| 屏东市| 凌源市| 新绛县|