JS对象转URL参数(原生JS和jQuery两种方式)

转自:点击打开链接

现在的JS框架将ajax请求封装得非常简单,例如下面:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. $.ajax({  
  2.         type: "POST",  
  3.         url: "some.php",  
  4.         data: { name: "John", location: "Boston" }  
  5.     }).done(function( msg ) {  
  6.         alert( "Data Saved: " + msg );  
  7.     });  


上面是基于jQuery框架的一段ajax请求代码,使用了POST请求方式
但在某些场景中我们还是得使用GET方式,并且需要拼出请求参数,比如window.open时,a标签的href等等.像这种拼接字符串的代码很容易发生错误,比如要将一个对象的所有属性和值拼接为URL的请求参数,我们可能需要这样:
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var params = '';  
  2. params += 'key1='+obj.key1;  
  3. params += 'key2='+obj.key2;  
  4. params += 'key3='+obj.key3;  
  5. params += 'key4='+obj.key4;  
  6. ...  


不用说太多,痛苦啊,就像苦力,一点也体会不到程序员高大上的感觉.或许,我们可以这样
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var params = urlEncode(obj);  



既然这样,这是怎么实现的呢?先看一看网上一哥们基于jQuery的实现方案
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var parseParam=function(param, key){  
  2.     var paramStr="";  
  3.     if(param instanceof String||param instanceof Number||param instanceof Boolean){  
  4.         paramStr+="&"+key+"="+encodeURIComponent(param);  
  5.     }else{  
  6.         $.each(param,function(i){  
  7.             var k=key==null?i:key+(param instanceof Array?"["+i+"]":"."+i);  
  8.             paramStr+='&'+parseParam(this, k);  
  9.         });  
  10.     }  
  11.     return paramStr.substr(1);  
  12. };  

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. //test  
  2. var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]};  
  3. parseParam(obj);  
  4. //output: "name=tom&class.className=class1&classMates[0].name=lily"  
  5. parseParam(obj,'stu');  
  6. //output: "stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily"  


引用自刘家华 http://www.oschina.net/code/snippet_139242_7584


由于是这段代码本身并不算多,为了增强其通用性,我使用了原生Javascript重写了该方法,如下:
[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * param 将要转为URL参数字符串的对象 
  3.  * key URL参数字符串的前缀 
  4.  * encode true/false 是否进行URL编码,默认为true 
  5.  *  
  6.  * return URL参数字符串 
  7.  */  
  8. var urlEncode = function (param, key, encode) {  
  9.   if(param==nullreturn '';  
  10.   var paramStr = '';  
  11.   var t = typeof (param);  
  12.   if (t == 'string' || t == 'number' || t == 'boolean') {  
  13.     paramStr += '&' + key + '=' + ((encode==null||encode) ? encodeURIComponent(param) : param);  
  14.   } else {  
  15.     for (var i in param) {  
  16.       var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);  
  17.       paramStr += urlEncode(param[i], k, encode);  
  18.     }  
  19.   }  
  20.   return paramStr;  
  21. };  
  22.   
  23.   
  24. var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]};  
  25. console.log(urlEncode(obj));  
  26. //output: &name=tom&class.className=class1&classMates[0].name=lily  
  27. console.log(urlEncode(obj,'stu'));  
  28. //output: &stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily  


评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值