基于jquery把表单转成成json对象

阅读更多

最近前端框架修改，小伙伴希望能像以前写jsp一样使用 对象.属性作为表单元素的name值

我这种懒人第一反应肯定去找度娘，发现度娘居然没有，只好自己造了轮子。

   function form2Json(params){
	 var selector=params.form;
	 var values= $(selector).serializeArray();
	 var obj={};
	 for (var index = 0; index < values.length; ++index)    
    {    
       var temp=obj; //上一级     
       var n=values[index].name;  
       if(n.indexOf(".")>-1){  
           var arr=n.split(".");  
           for(var i=0;i-1){  
                   var a=arr[i].substring(0,arr[i].indexOf("["));  
                   temp[a]=temp[a]||[];  
                   var y=arr[i].substring(arr[i].indexOf("[")+1,arr[i].indexOf("]"));  
                   temp[a][y]=temp[a][y]||{};  
                   temp=temp[a][y];  
               }else{  
                   temp[arr[i]]=temp[arr[i]] || {};     
                   temp=temp[arr[i]];  
               }  
           }
           temp[arr[arr.length-1]]=values[index].value;       
       }else{  
           if(obj[n] !==undefined && obj[n]!=null){  
              if( !$.isArray(obj[n])){  
                  var v=obj[n];  
                  obj[n]=[];  
                  obj[n].push(v);  
              }
              
              obj[n].push(values[index].value);  
           }else{   
               obj[n]=values[index].value;  
           }  
       }     
    }   	
	 return obj;
}

该轮子支持复杂对象，支持对象数组，支持简单属性

    $("#test-btn").on("click",function(){
	  var json=form2Json({
		  form:"#test-form"
	  });
	 console.log(json);
	 console.log(JSON.stringify(json));
  });

最终结果如下

{"a":{"b":{"c":"abc","d":"abd"},"f":"af"},"x":"x","y":["0","y2"],"m":[{"c":"m0c","d":"m0d"},{"c":"m1c","d":"m1d"}]}