[开发笔记]-使用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("(^|&)" + name + "=([^&]*)(&|$)"<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("(^|&)" + name + "=([^&]*)(&|$)"); <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()
{
args[argname]=unescape(value);//存为属性 }</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("&");<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<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>
</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/
本文首发博客园,版权归作者跟博客园共有。
转载必须保留本段声明,并在页面显著位置给出本文链接,否则保留追究法律责任的权利。
</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>
tomcat简介
date的详细说明
30岁前成功的12条黄金法则
2012春晚经典语录
统计文件中某个单词出现的次数
nginx简介
ATM取款机系统模拟仿真
十三种时间管理方法
笔试常见的智力题 附答案
- 最新文章
-
[置顶] SQLServer2008 附加数据库报 611版本不支持655版本错误以及解决方案
[置顶] 简单大方的登陆界面(包括flash动画)
[置顶] 动软软代码生成器使用(127.0.0.1)无法看到 SQLServer2008 新附加数据库的 原因 以及 解决方案
[置顶] VS2010中出现无法嵌入互操作类型
[置顶] 当前上下文不存在 ScriptManager 的原因分析以及解决方案 (System.Web.Extensions)
[置顶] sqlserver2008 新建表之后无法更改表设计的原因
[置顶] "无法使用前导 .. 在顶级目录上退出" 错误分析以及解决方案
[置顶] word文档批量忽略(新版office)
[置顶] border的使用
git clone 一些简单笔记