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

來源:互聯網
上載者:User

標籤:encodeuri   派生   star   架構   ams   each   tools   assm   標籤   

轉自:點擊開啟連結

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

[javascript] view plain copy    
  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    
  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    
  1. var params = urlEncode(obj);  

 

 

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

[javascript] view plain copy    
  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    
  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    
  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.   
  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  


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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.