首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

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

2012-11-19 
js获取url及起参数列表及扩展应用在基于B/S的web开发中，我们时常会通过发请求给服务端，来完成所需要的功能

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;  
  19.     
  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.     };  
  64.       
  65.     var queryObject = function(a) {  
  66.       var self = this;  
  67.       self.keys = {};  
  68.         
  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  
  79.             
  80.           jQuery.each(q.split(/[&;]/), function(){  
  81.             var key = decodeURIComponent(this.split('=')[0] || "");  
  82.             var val = decodeURIComponent(this.split('=')[1] || "");  
  83.               
  84.             if (!key) return;  
  85.               
  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.             }  
  92.               
  93.             val = (!val && val !== 0) ? true : val;  
  94.               
  95.             if (val !== false && val !== true && typeof val != 'number')  
  96.               val = val;  
  97.               
  98.             self.SET(key, val);  
  99.           });  
  100.         });  
  101.       }  
  102.       return self;  
  103.     };  
  104.       
  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.         };  
  212.           
  213.         build(this.keys);  
  214.           
  215.         if (chunks.length > 0) queryString.push($hash);  
  216.         queryString.push(chunks.join($separator));  
  217.           
  218.         return queryString.join("");  
  219.       }  
  220.     };  
  221.       
  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的附件我也传上点击打开链接。希望这篇文章对大家有所帮助。

读书人精选
热点排行