`

js获取url及起参数列表及扩展应用

 
阅读更多

在基于B/S的web开发中,我们时常会通过发请求给服务端,来完成所需要的功能。这时候,url就少不了,无参的,带参的,等等。所以在有的时候,我们就需要通过获取当前发送的url的参数,通过这些参数进而完成更多的功能,所以这篇文章我们就会谈到,在不借助其他工具的情况下,用我们的jquery来完成对当前请求的url的参数的获取。

在这里,我就列举出3类的获取参数的方法,其实质,当然,都是类似的。

第一种:1.引用外部js:<script type="text/javascript" src="js/jquery.query.js"></script>

2.设置js参数:<script type="text/javascript">

var jQuery.query={numbers:false,hash:true};

</script>

3.调用方法,获得参数:$.query.get(param1),$.query.get(param2),$.query.get(param3)......

第二种:1.引用外部js:<script type="text/javascript" src="js/jquery.query.js"></script>

2.编写脚本方法:<script type="text/javascript">

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

</script>

3.调用方法,获得参数:GetQueryString("param1"),GetQueryString("param2"),GetQueryString("param3").....

第三种:1.引用外部js:<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

2.编写脚本方法:<script type="text/javascript">

$.extend(

getUrlVars:function(){

var vars=[],hash;

var hashes=window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

for(vari = 0; i < hashes.length; i++)

{

hash = hashes[i].split('=');

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

},

getUrlVar:function(name){

return $.getUrlVars()[name];

}

);

</script>

3.调用方法,获得参数:$.getUrlVars();$.getUrlVar('name');

由上述三种方式可以看出,我们会引用到jquery.query.js这个js文件,这个js里到底是提供了哪些方法呢,下面我们把它的代码贴出来:

Js代码
  1. /**
  2. *jQuery.query-QueryStringModificationandCreationforjQuery
  3. *WrittenbyBlairMitchelmore(blairDOTmitchelmoreATgmailDOTcom)
  4. *LicensedundertheWTFPL(http://sam.zoy.org/wtfpl/).
  5. *Date:2009/8/13
  6. *
  7. *@authorBlairMitchelmore
  8. *@version2.1.6
  9. *
  10. **/
  11. newfunction(settings){
  12. //VariousSettings
  13. var$separator=settings.separator||'&';
  14. var$spaces=settings.spaces===false?false:true;
  15. var$suffix=settings.suffix===false?'':'[]';
  16. var$prefix=settings.prefix===false?false:true;
  17. var$hash=$prefix?settings.hash===true?"#":"?":"";
  18. var$numbers=settings.numbers===false?false:true;
  19. jQuery.query=newfunction(){
  20. varis=function(o,t){
  21. returno!=undefined&&o!==null&&(!!t?o.constructor==t:true);
  22. };
  23. varparse=function(path){
  24. varm,rx=/\[([^[]*)\]/g,match=/^([^[]+?)(\[.*\])?$/.exec(path),base=match[1],tokens=[];
  25. while(m=rx.exec(match[2]))tokens.push(m[1]);
  26. return[base,tokens];
  27. };
  28. varset=function(target,tokens,value){
  29. varo,token=tokens.shift();
  30. if(typeoftarget!='object')target=null;
  31. if(token===""){
  32. if(!target)target=[];
  33. if(is(target,Array)){
  34. target.push(tokens.length==0?value:set(null,tokens.slice(0),value));
  35. }elseif(is(target,Object)){
  36. vari=0;
  37. while(target[i++]!=null);
  38. target[--i]=tokens.length==0?value:set(target[i],tokens.slice(0),value);
  39. }else{
  40. target=[];
  41. target.push(tokens.length==0?value:set(null,tokens.slice(0),value));
  42. }
  43. }elseif(token&&token.match(/^\s*[0-9]+\s*$/)){
  44. varindex=parseInt(token,10);
  45. if(!target)target=[];
  46. target[index]=tokens.length==0?value:set(target[index],tokens.slice(0),value);
  47. }elseif(token){
  48. varindex=token.replace(/^\s*|\s*$/g,"");
  49. if(!target)target={};
  50. if(is(target,Array)){
  51. vartemp={};
  52. for(vari=0;i<target.length;++i){
  53. temp[i]=target[i];
  54. }
  55. target=temp;
  56. }
  57. target[index]=tokens.length==0?value:set(target[index],tokens.slice(0),value);
  58. }else{
  59. returnvalue;
  60. }
  61. returntarget;
  62. };
  63. varqueryObject=function(a){
  64. varself=this;
  65. self.keys={};
  66. if(a.queryObject){
  67. jQuery.each(a.get(),function(key,val){
  68. self.SET(key,val);
  69. });
  70. }else{
  71. jQuery.each(arguments,function(){
  72. varq=""+this;
  73. q=q.replace(/^[?#]/,'');//removeanyleading?||#
  74. q=q.replace(/[;&]$/,'');//removeanytrailing&||;
  75. if($spaces)q=q.replace(/[+]/g,'');//replace+'swithspaces
  76. jQuery.each(q.split(/[&;]/),function(){
  77. varkey=decodeURIComponent(this.split('=')[0]||"");
  78. varval=decodeURIComponent(this.split('=')[1]||"");
  79. if(!key)return;
  80. if($numbers){
  81. if(/^[+-]?[0-9]+\.[0-9]*$/.test(val))//simplefloatregex
  82. val=parseFloat(val);
  83. elseif(/^[+-]?[0-9]+$/.test(val))//simpleintregex
  84. val=parseInt(val,10);
  85. }
  86. val=(!val&&val!==0)?true:val;
  87. if(val!==false&&val!==true&&typeofval!='number')
  88. val=val;
  89. self.SET(key,val);
  90. });
  91. });
  92. }
  93. returnself;
  94. };
  95. queryObject.prototype={
  96. queryObject:true,
  97. has:function(key,type){
  98. varvalue=this.get(key);
  99. returnis(value,type);
  100. },
  101. GET:function(key){
  102. if(!is(key))returnthis.keys;
  103. varparsed=parse(key),base=parsed[0],tokens=parsed[1];
  104. vartarget=this.keys[base];
  105. while(target!=null&&tokens.length!=0){
  106. target=target[tokens.shift()];
  107. }
  108. returntypeoftarget=='number'?target:target||"";
  109. },
  110. get:function(key){
  111. vartarget=this.GET(key);
  112. if(is(target,Object))
  113. returnjQuery.extend(true,{},target);
  114. elseif(is(target,Array))
  115. returntarget.slice(0);
  116. returntarget;
  117. },
  118. SET:function(key,val){
  119. varvalue=!is(val)?null:val;
  120. varparsed=parse(key),base=parsed[0],tokens=parsed[1];
  121. vartarget=this.keys[base];
  122. this.keys[base]=set(target,tokens.slice(0),value);
  123. returnthis;
  124. },
  125. set:function(key,val){
  126. returnthis.copy().SET(key,val);
  127. },
  128. REMOVE:function(key){
  129. returnthis.SET(key,null).COMPACT();
  130. },
  131. remove:function(key){
  132. returnthis.copy().REMOVE(key);
  133. },
  134. EMPTY:function(){
  135. varself=this;
  136. jQuery.each(self.keys,function(key,value){
  137. deleteself.keys[key];
  138. });
  139. returnself;
  140. },
  141. load:function(url){
  142. varhash=url.replace(/^.*?[#](.+?)(?:\?.+)?$/,"$1");
  143. varsearch=url.replace(/^.*?[?](.+?)(?:#.+)?$/,"$1");
  144. returnnewqueryObject(url.length==search.length?'':search,url.length==hash.length?'':hash);
  145. },
  146. empty:function(){
  147. returnthis.copy().EMPTY();
  148. },
  149. copy:function(){
  150. returnnewqueryObject(this);
  151. },
  152. COMPACT:function(){
  153. functionbuild(orig){
  154. varobj=typeoforig=="object"?is(orig,Array)?[]:{}:orig;
  155. if(typeoforig=='object'){
  156. functionadd(o,key,value){
  157. if(is(o,Array))
  158. o.push(value);
  159. else
  160. o[key]=value;
  161. }
  162. jQuery.each(orig,function(key,value){
  163. if(!is(value))returntrue;
  164. add(obj,key,build(value));
  165. });
  166. }
  167. returnobj;
  168. }
  169. this.keys=build(this.keys);
  170. returnthis;
  171. },
  172. compact:function(){
  173. returnthis.copy().COMPACT();
  174. },
  175. toString:function(){
  176. vari=0,queryString=[],chunks=[],self=this;
  177. varencode=function(str){
  178. str=str+"";
  179. if($spaces)str=str.replace(//g,"+");
  180. returnencodeURIComponent(str);
  181. };
  182. varaddFields=function(arr,key,value){
  183. if(!is(value)||value===false)return;
  184. varo=[encode(key)];
  185. if(value!==true){
  186. o.push("=");
  187. o.push(encode(value));
  188. }
  189. arr.push(o.join(""));
  190. };
  191. varbuild=function(obj,base){
  192. varnewKey=function(key){
  193. return!base||base==""?[key].join(""):[base,"[",key,"]"].join("");
  194. };
  195. jQuery.each(obj,function(key,value){
  196. if(typeofvalue=='object')
  197. build(value,newKey(key));
  198. else
  199. addFields(chunks,newKey(key),value);
  200. });
  201. };
  202. build(this.keys);
  203. if(chunks.length>0)queryString.push($hash);
  204. queryString.push(chunks.join($separator));
  205. returnqueryString.join("");
  206. }
  207. };
  208. returnnewqueryObject(location.search,location.hash);
  209. };
  210. }(jQuery.query||{});//PassinjQuery.queryassettingsobject

由源码我们可以看出,之前调用的它的东西,在源码中都有定义,如get()方法,load()方法,toString()方法等等。它里面提供了众多的扩展方法,这个就有待大家一起去研究使用。例如:

1. 想获取test,则在引入该js后,使用如下方式获取:var value=$.query.get('key');

2. 参数列表的名称相同,则可以这样,var arrValues=$.query.get("key"); arr=[value1,value2,value3....]

3. 参数列表的名称相同,想获取第二个参数,var value2=$.query.get("key[1]")

4. 设置参数,var newKey=$.query.set("name","zhangsan").toString(); newKey : "?name=zhangsan"

5. 设置两个参数,var newKeys=$.query.set("name","zhangsan").set("age",23).toString(); newKeys : "?name=zhangsan && age=23"

6. 删除一个参数:var deleteKey=$.query.REMOVE("sex");

7. 清空所有的参数:var emptyKey=$.query.empty();

8. 复制所有参数:var copyKeys=$.query.copy();

等等以上很多,更多的源自于对源码的研究和利用,这些就靠大家自己去琢磨了,实在没有你想要的,自己再这个基础上再添加自己的想要的代码也是可以的,该js的附件我也传上点击打开链接。希望这篇文章对大家有所帮助。

分享到:
评论

相关推荐

    js获取url参数的使用扩展实例

    js获取参数的具体应用,欢迎加入脚本之家交流群

    xheditor-1.1.14

    参数值:动画上传前限制的文件扩展名列表,默认为:swf,建议与服务端扩展名检查列表一致 upMediaUrl:视频文件上传接收URL 参数值:接收用户上传的服务器端程序URL,默认留空为禁用上传功能,具体使用方法请参考...

    程序天下:JavaScript实例自学手册

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 ...

    php网络开发完全手册

    11.1.6 下拉框与列表框标签select 172 11.2 表单数据的接收 173 11.2.1 GET方法 173 11.2.2 POST方法 176 11.3 常用表单数据的验证方法 177 11.3.1 姓名验证 177 11.3.2 日期验证 177 11.3.3 E-mail地址验证 178 ...

    大名鼎鼎SWFUpload- Flash+JS 上传

    JavaScript 库: SWFUpload.js Flash控制元素: SWFUpload_f8.swf 或者 SWFupload_f9.swf 事件处理 使用SWFUpload遇到的多数问题是由不正确地设置或者定义了糟糕的处理事件引起的。 初始化和设置 SWFpload必须在...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...

    基于ApacheNutch和Htmlunit的扩展实现AJAX页面爬虫抓取解析插件nutch-htmlunit.zip

    false本应为solr索引url参数,此处设置为false不做solr索引处理; 1为爬虫执行回数 运行结束后可以看到天猫商品页面的价格/描述/滚动加载的图片等所有信息都已经完整获取到。 运行日志输入示例参考:...

    MDUI:明道三方集成框架

    ##基础布局框架引入以上js文件,参数说明:u 当前登录者用户IDp 当前登录用户所在的网络ID可以通过调用以下方法获取顶部、左侧导航和底部信息md.api.getAppBaseFrame({ top: "", right: "", bootom: "", left: "", ...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    JQuery扩展以及自动执行函数的应用 JQuery阻止事件发生 JQuery扩展 作业 第18周 内容概要 JS正则详解 JS正则详解之验证 组件BootStrap、EasyUI、JQueryUI 插件轮播 Django_Web框架引入 Django工程创建 Django目录...

    EasyASP 2.1 UTF-8.rar

    [ASP] 能轻松实现页面地址获取并对URL参数进行过滤以及替换。 [工具] 具有专为EasyASP开发的适用于Dreamweaver CS3 和 CS4 的代码高亮及代码提示扩展插件。 [工具] 具有完善的帮助手册及大量应用实例。

    ActionScript开发人员指南中文版

    在其他应用程序中打开URL 第章:与其他FlashPlayer和AIR实例通信 关于LocalConnection类 在两个应用程序之间发送消息 连接到不同域中的内容和AIR应用程序 第章:与AIR中的本机进程通信 本机进程通信概述 启动和关闭本...

    Movie-Review

    GET /categories用法:获取适用于该应用程序的所有类别。 列表位于category.js中。 随意根据需要扩展此列表。 GET /:category/posts用法:获取特定类别的所有帖子 GET /posts用法:获取所有帖子。 如果未选择类别...

    vc++ 应用源码包_1

    从fnMyDownload开始,程序首先解析输入的url,拆分为地址,路径,文件名等。然后获取文件头,得到文件大小,然后再下载。重点函数是ThreadDownLoad。下载完之后用FileCombine合并文件。Mydownload.cpp底端的...

    python入门到高级全栈工程师培训 第3期 附课件代码

    python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 ...15 再插两道JavaScript面试题 16 Model操作之select_related以及...

    PHP入门到精通

    8.7对URL传递的参数进行编码解码 8.8PHP与Web表单的综合应用 PHP与JavaScript交互(教学录像:1小时11分36秒) 9.1了解JavaScript 9.2JavaScript语言基础 9.3自定义函数 9.4JavaScript流程控制语句 9.5JavaScript...

    PHP入门到精通02

    8.7对URL传递的参数进行编码解码 8.8PHP与Web表单的综合应用 PHP与JavaScript交互(教学录像:1小时11分36秒) 9.1了解JavaScript 9.2JavaScript语言基础 9.3自定义函数 9.4JavaScript流程控制语句 9.5JavaScript...

    WEB安全测试

    10.2 识别应用中的JavaScript 214 10.3 从AJAX活动回溯到源代码 215 10.4 截获和修改AJAX请求 216 10.5 截获和修改服务器响应 218 10.6 使用注入数据破坏AJAX 220 10.7 使用注入XML破坏AJAX 222 10.8 使用注入JSON...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...

    史上最全传智播客PHP就业班视频课,8月份视频

    9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...

Global site tag (gtag.js) - Google Analytics