工程分享-帶參數跳轉等內容

首先，在製作網頁中，想實現在點擊提交按鈕後，根據當前按鈕的不同，將按鈕信息附加到鏈接的後邊，如下圖所示：

上圖中，鏈接後的id=LJQ，就是實現帶參數跳轉，之後便於在跳轉頁根據id=X；根據x不同，實現不同載入圖片等內容；

接下來是如何實現帶參數跳轉：

 1 $('.detailChart').on( "click", function () {
 2                  //編寫點擊對應的事件
 3         var result={
 4                 "name":jQuery(this).attr("id")
 5         }        //該方法也就是上一個工程分享的：格式化對象
 6            $.ajax({
 7                   //ajax方式發送請求
 8                type: "POST",
 9                url: "postIndName.action",
10                dataType:"text",
11                   //ajax返回值設置為text（json格式也可用它返回，可列印出結果，也可設置成json）
12                data:result,
                      //result中包含著獲取到的id信息
13                success: function(json){  
14                    var url=window.location.pathname;
15                     if(url=='/PEEMES/xitongfenxi.jsp')
16         self.location='/PEEMES/xitongzhibiao.jsp?id='+result.name;
                     //在該處實現帶參數的鏈接                    
17                }
18                });
19     });

接下來講解，如何對帶參數鏈接進行解析呢？

1     var a=getQueryString("id");
2     function getQueryString(name){  
3            //正則表達式方法獲得url中?後的參數值
4     var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)","i");
5     var r=window.location.search.substr(1).match(reg);
6     if(r!=null) return unescape(r[2]);
7     return null;
8 }

解釋：

      首先理解定義的正則表達式，（^|&）意思是從頭開始匹配字元&, =([^&]*)意思是匹配=後面零個或多個不是&的字元，直至碰到第一個&為止，(&|$)意思就是匹配最後一個&，在正則表達式中，增加一個()代表著匹配數組中增加一個值, 因此代碼中的正則匹配後數組中應包含4個值, 在getQueryString("name")函數中，此時 r 獲取到的數組應該是 ["name=elephant&", "", "elephant", "&"]

　　代碼中 window.location.search 意思是取window.location中 '?'後面的值包括'?',因此所得到的值是"?name=elephant&age=25&sex=male"

　　substr()這個函數的作用是截取字元串，在代碼中window.location.search.surstr(1) 意思就是截取第一個字元後面的字元串，所得到的值即是"name=elephant&age=25&sex=male"

      unescape這個函數的作用是解碼escape編碼後的字元串

如何實現獲得url中所有信息？

 1 function parse_url(_url){ //定義函數
 2 　　var pattern = /(\w+)=(\w+)/ig;//定義正則表達式
 3 　　var parames = {};//定義數組
 4 　　url.replace(pattern, function(a, b, c){
 5 　　　　parames[b] = c;
 6 　　});
 7 　　return parames;//返回這個數組.
 8 }
 9 
10 var  url = "http://www.baidu.com?name=elep&age=25&sex=male" 
11 var params = parse_url(url);// ["name=elep", "age=25", "sex=male"]

       當replace匹配到name=elep時.那麼就用執行function(a,b,c);其中a的值為:name=elep,b的值為name,c的值為elep;(這是反向引用.因為在定義正則表達式的時候有兩個子匹配.)，然後將數組的key為name的值賦為elephant;然後完成.

　　再繼續匹配到age=25;此時執行function(a,b,c);其中a的值為:age=25,b的值為age,c的值為25;然後將數組的key為id的值賦為25.  

   接下來，可以根據不一樣的參數信息，得到進行不同實現：

 1          //Jquery實現不同載入圖片
 2          var b=a.split("_");
 3        //對獲取到的含有變數的a進行處理；
 4     if(a=="DG_XT_004")
 5         {
 6           src=src+"energy.bmp";//載入圖片名為energy.bmp
 7           $(".expression").html("123");//表達式為：123
 8         }
 9     else if(a=="DG_XT_005"){
10         src=src+"yield.bmp";//載入圖片名為:yield.bmp
11         $(".expression").html("456");//表達式為：465
12     }
13         

    一個小小的實現，希望與大家同學習，共進步~