本篇教程介绍了jQuery教程 带参数跳转等内容实例讲解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

首先，在制作网页中，想实现在点击提交按钮后，根据当前按钮的不同，将按钮信息附加到链接的后边，如下图所示：

上图中，链接后的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 = "//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         

   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！