使用jquery获取url及url参数的方法

[开发笔记]-使用jquery获取url及url参数的方法

使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作

1、jquery获取url很简单，代码如下：

window.location.href;

其实只是用到了javascript的基础的window对象，并没有用jquery的知识。

2、jquery获取url参数比较复杂，要用到正则表达式，所以学好javascript正则式多么重要的事情

首先看看单纯的通过javascript是如何来获取url中的某个参数：

        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }

通过这个函数传递url中的参数名就可以获取到参数的值，比如url为

http://localhost:33064/WebForm2.aspx?reurl=WebForm1.aspx

我们要获取reurl的值，可以这样写：

var xx = getUrlParam('reurl');

明白了javascript获取url参数的方法，我们可以通过这个方法为jquery扩展一个方法来通过jquery获取url参数，下面的代码为jquery扩展了一个getUrlParam()方法

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

为jquery扩展了这个方法了之后我们就可以通过如下方法来获取某个参数的值了：

   var xx = $.getUrlParam('reurl');

完整代码：

    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
        </span><span style="color: #008000;">//</span><span style="color: #008000;">方法二：</span>
        (<span style="color: #0000ff;">function</span><span style="color: #000000;"> ($) {
            $.getUrlParam </span>= <span style="color: #0000ff;">function</span><span style="color: #000000;"> (name) {
                </span><span style="color: #0000ff;">var</span> reg = <span style="color: #0000ff;">new</span> RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"<span style="color: #000000;">);
                </span><span style="color: #0000ff;">var</span> r = window.location.search.substr(1<span style="color: #000000;">).match(reg);
                </span><span style="color: #0000ff;">if</span> (r != <span style="color: #0000ff;">null</span>) <span style="color: #0000ff;">return</span> unescape(r[2]); <span style="color: #0000ff;">return</span> <span style="color: #0000ff;">null</span><span style="color: #000000;">;
            }
        })(jQuery);

        </span><span style="color: #008000;">//</span><span style="color: #008000;">方法二：</span>
        <span style="color: #0000ff;">var</span> xx = $.getUrlParam('reurl'<span style="color: #000000;">);

        </span><span style="color: #008000;">//</span><span style="color: #008000;">方法一：</span>
        <span style="color: #008000;">//</span><span style="color: #008000;"> var xx = getUrlParam('reurl');</span>


        alert(xx);

    });

    </span><span style="color: #008000;">//</span><span style="color: #008000;">方法一：</span>
    <span style="color: #008000;">//</span><span style="color: #008000;">获取url中的参数</span>
    <span style="color: #0000ff;">function</span><span style="color: #000000;"> getUrlParam(name) {
        </span><span style="color: #0000ff;">var</span> reg = <span style="color: #0000ff;">new</span> RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); <span style="color: #008000;">//</span><span style="color: #008000;">构造一个含有目标参数的正则表达式对象</span>
        <span style="color: #0000ff;">var</span> r = window.location.search.substr(1).match(reg);  <span style="color: #008000;">//</span><span style="color: #008000;">匹配目标参数</span>
        <span style="color: #0000ff;">if</span> (r != <span style="color: #0000ff;">null</span>) <span style="color: #0000ff;">return</span> unescape(r[2]); <span style="color: #0000ff;">return</span> <span style="color: #0000ff;">null</span>; <span style="color: #008000;">//</span><span style="color: #008000;">返回参数值</span>

        }
</script>

2014-4-23 修改

今天在用上面的方法获取url中的参数时，url中传递的中文参数在解析的时候无论怎么测试，获取的都是乱码。经过一番调试后发现，我再传递参数时，对汉字编码使用的是 encodeURI ，而上面的方法在解析参数编码时使用的是unescape ,修改为 decodeURI 就可以了。

附： W3School中的介绍：

JavaScript unescape() 函数

定义和用法

unescape() 函数可对通过 escape() 编码的字符串进行解码。

参数	描述
string	必需。要解码或反转义的字符串。

说明

该函数的工作原理是这样的：通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 u00xx 和 uxxxx 替换这样的字符序列进行解码。

提示和注释

注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

综上： javascript对参数编码解码方法要一致：

escape()   unescape()

encodeURI()   decodeURI() 

encodeURIComponent()    decodeURIComponent()  

网上找的另一种javascript获取url中参数的方法：

<script language="JavaScript" type="text/javascript"> 
function GetUrlParms()
{
</span><span style="color: #0000ff;">var</span> args=<span style="color: #0000ff;">new</span><span style="color: #000000;"> Object();   

</span><span style="color: #0000ff;">var</span> query=location.search.substring(1);<span style="color: #008000;">//</span><span style="color: #008000;">获取查询串   </span>

<span style="color: #0000ff;">var</span> pairs=query.split("&amp;");<span style="color: #008000;">//</span><span style="color: #008000;">在逗号处断开   </span>

<span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span>   i=0;i&lt;pairs.length;i++<span style="color: #000000;">)   

{   

    </span><span style="color: #0000ff;">var</span> pos=pairs[i].indexOf('=');<span style="color: #008000;">//</span><span style="color: #008000;">查找name=value   </span>

        <span style="color: #0000ff;">if</span>(pos==-1)   <span style="color: #0000ff;">continue</span>;<span style="color: #008000;">//</span><span style="color: #008000;">如果没有找到就跳过   </span>

        <span style="color: #0000ff;">var</span> argname=pairs[i].substring(0,pos);<span style="color: #008000;">//</span><span style="color: #008000;">提取name   </span>

        <span style="color: #0000ff;">var</span> value=pairs[i].substring(pos+1);<span style="color: #008000;">//</span><span style="color: #008000;">提取value   </span>


            args[argname]=unescape(value);//存为属性   

    }
</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> args;

}
var args = new Object();
args = GetUrlParms();
//如果要查找参数key:
if(args["id"]!=undefined)
{
//如果要查找参数key:
var value1 = args["id"] ;
alert(value1);
}</script>

转载请注明出处。

作者：酷小孩

出处：http://www.cnblogs.com/babycool/

本文首发博客园，版权归作者跟博客园共有。

转载必须保留本段声明，并在页面显著位置给出本文链接，否则保留追究法律责任的权利。

分类: JavaScript,jQuery,开发笔记

好文要顶 关注我 收藏该文

酷小孩
关注 - 112
粉丝 - 269

+加关注

14

1

« 上一篇：[开发笔记]-页面切图、CSS前端设计、JS
» 下一篇：[开发笔记]-flowplayer视频播放插件

	</div>
	<div class="postDesc">posted @ <span id="post-date">2013-07-03 11:09</span> <a href="http://www.cnblogs.com/babycool/">酷小孩</a> 阅读(<span id="post_view_count">194217</span>) 评论(<span id="post_comment_count">5</span>)  <a href="https://i.cnblogs.com/EditPosts.aspx?postid=3169058" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(3169058);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=94757,cb_entryId=3169058,cb_blogApp=currentBlogApp,cb_blogUserGuid='da5def54-57c3-e011-8673-842b2b196315',cb_entryCreatedDate='2013/7/3 11:09:00';loadViewCount(cb_entryId);</script>