读书人
栏目▼

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

发布时间： 2012-11-19 10:18:51 作者： rapoo

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 ( var i = 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 - Query String Modification and Creation for jQuery
  3. * Written by Blair Mitchelmore (blair DOT mitchelmore AT gmail DOT com)
  4. * Licensed under the WTFPL (http://sam.zoy.org/wtfpl/).
  5. * Date: 2009/8/13
  6. *
  7. * @author Blair Mitchelmore
  8. * @version 2.1.6
  9. *
  10. **/
  11. new function(settings) {
  12. // Various Settings
  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;
  20. jQuery.query = new function() {
  21. var is = function(o, t) {
  22. return o != undefined && o !== null && (!!t ? o.constructor == t : true);
  23. };
  24. var parse = function(path) {
  25. var m, rx = /\[([^[]*)\]/g, match = /^([^[]+?)(\[.*\])?$/.exec(path), base = match[1], tokens = [];
  26. while (m = rx.exec(match[2])) tokens.push(m[1]);
  27. return [base, tokens];
  28. };
  29. var set = function(target, tokens, value) {
  30. var o, token = tokens.shift();
  31. if (typeof target != 'object') target = null;
  32. if (token === "") {
  33. if (!target) target = [];
  34. if (is(target, Array)) {
  35. target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
  36. } else if (is(target, Object)) {
  37. var i = 0;
  38. while (target[i++] != null);
  39. target[--i] = tokens.length == 0 ? value : set(target[i], tokens.slice(0), value);
  40. } else {
  41. target = [];
  42. target.push(tokens.length == 0 ? value : set(null, tokens.slice(0), value));
  43. }
  44. } else if (token && token.match(/^\s*[0-9]+\s*$/)) {
  45. var index = parseInt(token, 10);
  46. if (!target) target = [];
  47. target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
  48. } else if (token) {
  49. var index = token.replace(/^\s*|\s*$/g, "");
  50. if (!target) target = {};
  51. if (is(target, Array)) {
  52. var temp = {};
  53. for (var i = 0; i < target.length; ++i) {
  54. temp[i] = target[i];
  55. }
  56. target = temp;
  57. }
  58. target[index] = tokens.length == 0 ? value : set(target[index], tokens.slice(0), value);
  59. } else {
  60. return value;
  61. }
  62. return target;
  63. };
  65. var queryObject = function(a) {
  66. var self = this;
  67. self.keys = {};
  69. if (a.queryObject) {
  70. jQuery.each(a.get(), function(key, val) {
  71. self.SET(key, val);
  72. });
  73. } else {
  74. jQuery.each(arguments, function() {
  75. var q = "" + this;
  76. q = q.replace(/^[?#]/,''); // remove any leading ? || #
  77. q = q.replace(/[;&]$/,''); // remove any trailing & || ;
  78. if ($spaces) q = q.replace(/[+]/g,' '); // replace +'s with spaces
  80. jQuery.each(q.split(/[&;]/), function(){
  81. var key = decodeURIComponent(this.split('=')[0] || "");
  82. var val = decodeURIComponent(this.split('=')[1] || "");
  84. if (!key) return;
  86. if ($numbers) {
  87. if (/^[+-]?[0-9]+\.[0-9]*$/.test(val)) // simple float regex
  88. val = parseFloat(val);
  89. else if (/^[+-]?[0-9]+$/.test(val)) // simple int regex
  90. val = parseInt(val, 10);
  91. }
  93. val = (!val && val !== 0) ? true : val;
  95. if (val !== false && val !== true && typeof val != 'number')
  96. val = val;
  98. self.SET(key, val);
  99. });
  100. });
  101. }
  102. return self;
  103. };
  105. queryObject.prototype = {
  106. queryObject: true,
  107. has: function(key, type) {
  108. var value = this.get(key);
  109. return is(value, type);
  110. },
  111. GET: function(key) {
  112. if (!is(key)) return this.keys;
  113. var parsed = parse(key), base = parsed[0], tokens = parsed[1];
  114. var target = this.keys[base];
  115. while (target != null && tokens.length != 0) {
  116. target = target[tokens.shift()];
  117. }
  118. return typeof target == 'number' ? target : target || "";
  119. },
  120. get: function(key) {
  121. var target = this.GET(key);
  122. if (is(target, Object))
  123. return jQuery.extend(true, {}, target);
  124. else if (is(target, Array))
  125. return target.slice(0);
  126. return target;
  127. },
  128. SET: function(key, val) {
  129. var value = !is(val) ? null : val;
  130. var parsed = parse(key), base = parsed[0], tokens = parsed[1];
  131. var target = this.keys[base];
  132. this.keys[base] = set(target, tokens.slice(0), value);
  133. return this;
  134. },
  135. set: function(key, val) {
  136. return this.copy().SET(key, val);
  137. },
  138. REMOVE: function(key) {
  139. return this.SET(key, null).COMPACT();
  140. },
  141. remove: function(key) {
  142. return this.copy().REMOVE(key);
  143. },
  144. EMPTY: function() {
  145. var self = this;
  146. jQuery.each(self.keys, function(key, value) {
  147. delete self.keys[key];
  148. });
  149. return self;
  150. },
  151. load: function(url) {
  152. var hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
  153. var search = url.replace(/^.*?[?](.+?)(?:#.+)?$/, "$1");
  154. return new queryObject(url.length == search.length ? '' : search, url.length == hash.length ? '' : hash);
  155. },
  156. empty: function() {
  157. return this.copy().EMPTY();
  158. },
  159. copy: function() {
  160. return new queryObject(this);
  161. },
  162. COMPACT: function() {
  163. function build(orig) {
  164. var obj = typeof orig == "object" ? is(orig, Array) ? [] : {} : orig;
  165. if (typeof orig == 'object') {
  166. function add(o, key, value) {
  167. if (is(o, Array))
  168. o.push(value);
  169. else
  170. o[key] = value;
  171. }
  172. jQuery.each(orig, function(key, value) {
  173. if (!is(value)) return true;
  174. add(obj, key, build(value));
  175. });
  176. }
  177. return obj;
  178. }
  179. this.keys = build(this.keys);
  180. return this;
  181. },
  182. compact: function() {
  183. return this.copy().COMPACT();
  184. },
  185. toString: function() {
  186. var i = 0, queryString = [], chunks = [], self = this;
  187. var encode = function(str) {
  188. str = str + "";
  189. if ($spaces) str = str.replace(/ /g, "+");
  190. return encodeURIComponent(str);
  191. };
  192. var addFields = function(arr, key, value) {
  193. if (!is(value) || value === false) return;
  194. var o = [encode(key)];
  195. if (value !== true) {
  196. o.push("=");
  197. o.push(encode(value));
  198. }
  199. arr.push(o.join(""));
  200. };
  201. var build = function(obj, base) {
  202. var newKey = function(key) {
  203. return !base || base == "" ? [key].join("") : [base, "[", key, "]"].join("");
  204. };
  205. jQuery.each(obj, function(key, value) {
  206. if (typeof value == 'object')
  207. build(value, newKey(key));
  208. else
  209. addFields(chunks, newKey(key), value);
  210. });
  211. };
  213. build(this.keys);
  215. if (chunks.length > 0) queryString.push($hash);
  216. queryString.push(chunks.join($separator));
  218. return queryString.join("");
  219. }
  220. };
  222. return new queryObject(location.search, location.hash);
  223. };
  224. }(jQuery.query || {}); // Pass in jQuery.query as settings object

由源码我们可以看出，之前调用的它的东西，在源码中都有定义，如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的附件我也传上点击打开链接。希望这篇文章对大家有所帮助。

读书人网 >JavaScript

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net