頁面傳值之URL查詢字符串

　　何謂頁面傳值，顧名思義，就是要進行頁面跳轉時，要將本頁面的一些值帶到要跳轉的頁面去。頁面傳值的方法有以下幾種：

       1.使用QueryString 查詢字符串。通過地址欄的參數傳值

       2.使用cookie。將值保存到cookie中，之后再從cookie中讀取相對應的值。

       3.使用session。

       4.使用Server.Transfer。

       5.使用Application。

       6.使用Cache。

       7.使用HttpContext的Item屬性。

       8.使用文件

   以上列舉的是ASP.NET的頁面傳值的方法，常用的也就是前三種。而前端開發人員，一般只采用前兩種來進行頁面傳值。今天，就說說第一種，怎么用查詢字符串傳值，並且在跳轉到指定頁面之后，怎么獲取到傳過來的值。

一、如何進行頁面傳值

      首先我們來看一下，頁面傳值的格式，以博客園的地址欄為例

     

     問號后面所跟的參數就是查詢字符串，這里只帶了opt這一個參數。如果有多個參數，用"&"隔開就行了。如"http://i.cnblogs.com/EditPosts.aspx?opt=1&id=2"

     那么怎么將參數值附加在url后面呢，話不多說，上圖：

   

   這個例子，點擊確定按鈕，跳轉至secondPage頁面，將參數兩個輸入框的值作為參數帶過去。

   跳轉之后，地址欄是這樣的

  

   這樣，值就傳過去了，是不是炒雞簡單呢。

二.獲取查詢字符串的值

   跳轉到第2個頁面之后，我們需要獲取地址欄后面的查詢參數，也就是問號后面那串字符。關於獲取整個url的就不多說了，可以參考這個http://blog.unvs.cn/archives/jquery-local-url-param.html  js獲取的方法如下：

 

  function GetUrlParms()
    {
        var args=new Object();
        var query=location.search.substring(1);//獲取查詢串
        var pairs=query.split("&");//在逗號處斷開
        for(var   i=0;i<pairs.length;i++)
        {
            var pos=pairs[i].indexOf('=');//查找name=value
            if(pos==-1)   continue;//如果沒有找到就跳過
            var argname=pairs[i].substring(0,pos);//提取name
            var value=pairs[i].substring(pos+1);//提取value
            args[argname]=unescape(value);//存為屬性
        }
        return args;
    }

  使用方法如下：

 

function showUrlParms()
{
    var arg=GetUrlParms();
    var id=arg["id"];
    var name=arg["name"];
    alert("id:"+id +",name:"+name);
}

點擊查看按鈕，我們看到已成功獲得值

這樣就結束了嗎，不，看看下面這個情況，當你user為中文時，就變成了這樣：

這是因為unescape()函數解碼中文后就變成了亂碼，ECMAScript v3 已從標准中刪除了 unescape() 函數，並反對使用它，因此應該用 decodeURI() 和 decodeURIComponent() 取而代之。

  function GetUrlParms()
    {
        var args=new Object();
        var query=location.search.substring(1);//獲取查詢串
        var pairs=query.split("&");//在逗號處斷開
        for(var   i=0;i<pairs.length;i++)
        {
            var pos=pairs[i].indexOf('=');//查找name=value
            if(pos==-1)   continue;//如果沒有找到就跳過
            var argname=pairs[i].substring(0,pos);//提取name
            var value=pairs[i].substring(pos+1);//提取value
            args[argname]=decodeURIComponent(value);//存為屬性
        }
        return args;
    }

javascript對參數編碼解碼方法要一致：

escape()   unescape()

encodeURI()   decodeURI() 

encodeURIComponent()    decodeURIComponent() 

 

這個呢，是用js實現的，下面，我們來看用jquery如何實現。

(function ($) {
                $.getUrlParam = function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return  decodeURIComponent(r[2]); return null;
                }
            })(jQuery);

 這里采用jquery擴展方法實現的，這樣方法調用，當然也可直接寫成一個函數調用，如下：

    <script type="text/javascript">
        $(function () {
            //方法二：
            (function ($) {
                $.getUrlParam = function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return decodeURIComponent(r[2]); return null;
                }
            })(jQuery);

            //方法二：
            var xx = $.getUrlParam('reurl');
            //方法一：
            // var xx = getUrlParam('reurl');
            alert(xx);
        });
        //方法一：
        //獲取url中的參數
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //構造一個含有目標參數的正則表達式對象
            var r = window.location.search.substr(1).match(reg);  //匹配目標參數
            if (r != null) return decodeURIComponent(r[2]); return null; //返回參數值
        }
 </script>

 

因為時間關系，這里就不詳細解釋了，上面代碼我也是盜這位仁兄http://www.cnblogs.com/babycool/p/3169058.html，還沒還得及試驗，大家可自己動手試試