JS對象轉URL參數(原生JS和jQuery兩種方式)

轉自：點擊打開鏈接

現在的js框架將ajax請求封裝得非常簡單,例如下面:

$.ajax({
        type: "POST",
        url: "some.php",
        data: { name: "John", location: "Boston" }
    }).done(function( msg ) {
        alert( "Data Saved: " + msg );
    });

上面是基於jQuery框架的一段ajax請求代碼,使用了POST請求方式
但在某些場景中我們還是得使用GET方式,並且需要拼出請求參數,比如window.open時,a標簽的href等等.像這種拼接字符串的代碼很容易發生錯誤,比如要將一個對象的所有屬性和值拼接為URL的請求參數,我們可能需要這樣:

var params = '';
params += 'key1='+obj.key1;
params += 'key2='+obj.key2;
params += 'key3='+obj.key3;
params += 'key4='+obj.key4;
...

不用說太多,痛苦啊,就像苦力,一點也體會不到程序員高大上的感覺.或許,我們可以這樣

var params = urlEncode(obj);

 

 

既然這樣,這是怎么實現的呢?先看一看網上一哥們基於jQuery的實現方案

var parseParam=function(param, key){
    var paramStr="";
    if(param instanceof String||param instanceof Number||param instanceof Boolean){
        paramStr+="&"+key+"="+encodeURIComponent(param);
    }else{
        $.each(param,function(i){
            var k=key==null?i:key+(param instanceof Array?"["+i+"]":"."+i);
            paramStr+='&'+parseParam(this, k);
        });
    }
    return paramStr.substr(1);
};

 

//test
var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]};
parseParam(obj);
//output: "name=tom&class.className=class1&classMates[0].name=lily"
parseParam(obj,'stu');
//output: "stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily"

引用自劉家華 http://www.oschina.net/code/snippet_139242_7584


由於是這段代碼本身並不算多,為了增強其通用性,我使用了原生Javascript重寫了該方法,如下:

/**
 * param 將要轉為URL參數字符串的對象
 * key URL參數字符串的前綴
 * encode true/false 是否進行URL編碼,默認為true
 *
 * return URL參數字符串
 */
var urlEncode = function (param, key, encode) {
  if(param==null) return '';
  var paramStr = '';
  var t = typeof (param);
  if (t == 'string' || t == 'number' || t == 'boolean') {
    paramStr += '&' + key + '=' + ((encode==null||encode) ? encodeURIComponent(param) : param);
  } else {
    for (var i in param) {
      var k = key == null ? i : key + (param instanceof Array ? '[' + i + ']' : '.' + i);
      paramStr += urlEncode(param[i], k, encode);
    }
  }
  return paramStr;
};


var obj={name:'tom','class':{className:'class1'},classMates:[{name:'lily'}]};
console.log(urlEncode(obj));
//output: &name=tom&class.className=class1&classMates[0].name=lily
console.log(urlEncode(obj,'stu'));
//output: &stu.name=tom&stu.class.className=class1&stu.classMates[0].name=lily