JS物件轉URL引數(原生JS和jQuery兩種方式)
阿新 • • 發佈:2019-02-06
現在的JS框架將ajax請求封裝得非常簡單,例如下面:
[javascript] view plain copy- $.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;
- ...
不用說太多,痛苦啊,就像苦力,一點也體會不到程式設計師高大上的感覺.或許,我們可以這樣 [javascript] view plain copy
- var params = urlEncode(obj);
- 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
- 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重寫了該方法,如下: [javascript] view plain copy
- /**
- * 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