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

转自：点击打开链接

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

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的请求参数,我们可能需要这样:

1. var params = '';
2. params += 'key1='+obj.key1;
3. params += 'key2='+obj.key2;
4. params += 'key3='+obj.key3;
5. params += 'key4='+obj.key4;
6. ...

不用说太多,痛苦啊,就像苦力,一点也体会不到程序员高大上的感觉.或许,我们可以这样

1. var params = urlEncode(obj);

既然这样,这是怎么实现的呢?先看一看网上一哥们基于jQuery的实现方案

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. };

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重写了该方法,如下:

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==null) return '';
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. var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]};
23. console.log(urlEncode(obj));
24. //output: &name=tom&class.className=class1&classMates[0].name=lily
25. console.log(urlEncode(obj,'stu'));
26. //output: &stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily