前言

玩了一下vuejs，里面的自动绑定这些机制挺吸引我的。
然而，问题来了，假如我将一个json对象，例如，增删改查里面的一条数据库记录对象，里面还要有几个列表对象，例如：

         var book={
             id:1
             ,name:"我的足迹"
             ,tags:[
                 {id:1,bookId:1,name:"旅行游记"}
                 ,{id:2,bookId:1,name:"风景"}
             ]
         };

那么当我们直接用绑定到界面时候，连个表单都不用，这样如何提交到后台，后台如何接收修改，如何进行更新数据记录？
一个方法是

JSON.stringify(book)

然后得到：

"{"id":1,"name":"我的足迹","tags":[{"id":1,"bookId":1,"name":"旅行游记"},{"id":2,"bookId":1,"name":"风景"}]}"

后台直接用：

伪代码：
JSONObject.toJson(Book.class,jsonStr)

这种方式来进行读取。

缺点
不敢说这方式不好，然后对于要赶工期的码农来说，每次接收一次数据数据，就要确保json格式不错误，要确保字段完全一样，这个就调试而言恐怕难度不低的，对于新手程序员或者不熟悉的人来说，压根要命，

一般历史代码接收数据的形式都是这样的：

第二点，如果有同行有后台接口开发经验的话，那么肯定知道接口写完以后自己要测试一下的，譬如，直接打个网址传写参数进去——-每次传数据都要json格式化那不就是要了码农的老命了吗？
有些正规一点的，接口文档跟测试放在一起的，譬如：

这就是测试文档了。。所以，在下苦口婆心劝告的意思是，咱们还是按照正常途径来处理。

所以解决方式是，将json都转成平时用得一维扁平表单数据，以下代码大家收好。

  function parseJson2Form(prefix,JsonObject){
             var realPrefix="";
             if(!util.checkEmpty(prefix)){
                 realPrefix= $.trim(prefix)+"";
             }
             var resObj={};
             var gettype = Object.prototype.toString;
             for (var Key in JsonObject) {
                 var tmpVal = JsonObject[Key];


                 var typeStr = gettype.call(tmpVal);
                 /*

                 "[object String]";
                 "[object Number]";
                 "[object Boolean]"
                 "[object Undefined]"
                 "[object Null]"
                 "[object Object]"
                 "[object Array]"
                 "[object Function]"
*/
                 if(tmpVal== null|| tmpVal== undefined){
                     resObj[realPrefix+"."+Key]= "";
                 }else{
                     if(
                             typeStr== "[object String]"
                             ||typeStr== "[object Number]"
                     ||typeStr==
                             "[object Boolean]" ||typeStr== "[object Null]"
                     ||typeStr==
                             "[object Undefined]"

                     ){
                         resObj[realPrefix+"." + Key]= tmpVal+"";
                     } else if(typeStr== "[object Object]") {

                             _recursive_parseJson2Form_(resObj,realPrefix+"."+ Key , tmpVal);

                     }                
                     else if(typeStr=="[object Array]"){
                         if(tmpVal.length<=0){
                             resObj[realPrefix+"."+Key]="";
                         }
                         else{
                             var isSimpleArray=false;
                             for(var arrIndex in tmpVal){
                                 var childItem=tmpVal[arrIndex];
                                 var childTypeStr=gettype.call(childItem);
                                 if(
                                         childTypeStr== "[object String]"
                                         || childTypeStr== "[object Number]"
                                         ||childTypeStr == "[object Boolean]"
                                         ||childTypeStr == "[object Null]"
                                         ||childTypeStr== "[object Undefined]"

                                 ){
                                     isSimpleArray=true;
                                 }
                             }
                             if(isSimpleArray){
                                 resObj[realPrefix+"."+Key]=tmpVal.join(",");
                             }
                             else{
                                 var nowIndex=0;
                                 for(var arrIndex in tmpVal){
                                     var childItem=tmpVal[arrIndex];
                                     _recursive_parseJson2Form_(resObj,realPrefix+"."+Key+"["+ nowIndex+"]", childItem);
                                     nowIndex++;
                                 }
                             }
                         }

                     }

                 }

             }

             return resObj;
         }

         function _recursive_parseJson2Form_(resObj,parentKey,JsonObject){

             var gettype = Object.prototype.toString;
             for (var Key in JsonObject) {
                 var tmpVal = JsonObject[Key];

                 var typeStr = gettype.call(tmpVal);
                 /*

                  "[object String]";
                  "[object Number]";
                  "[object Boolean]"
                  "[object Undefined]"
                  "[object Null]"
                  "[object Object]"
                  "[object Array]"
                  "[object Function]"
                  */
                 if(tmpVal== null|| tmpVal== undefined){
                     resObj[parentKey+"."+Key]= "";
                 }else{
                     if(
                             typeStr== "[object String]"
                             ||typeStr== "[object Number]"
                             ||typeStr=="[object Boolean]"
                             ||typeStr== "[object Null]"
                             ||typeStr=="[object Undefined]"

                     ){
                         resObj[parentKey+"." + Key]= tmpVal+"";
                     } else if(typeStr== "[object Object]") {
                         _recursive_parseJson2Form_(resObj,parentKey+"."+ Key , tmpVal);

                     }
                     else if(typeStr=="[object Array]"){
                         if(tmpVal.length<=0){
                             resObj[parentKey+"."+Key]="";
                         }
                         else{
                             var isSimpleArray=false;
                             for(var arrIndex in tmpVal){
                                 var childItem=tmpVal[arrIndex];
                                 var childTypeStr=gettype.call(childItem);

                                 if(
                                         childTypeStr== "[object String]"
                                         || childTypeStr== "[object Number]"
                                         ||childTypeStr == "[object Boolean]"
                                         ||childTypeStr == "[object Null]"
                                         ||childTypeStr== "[object Undefined]"

                                 ){
                                     isSimpleArray=true;
                                 }
                             }
                             if(isSimpleArray){
                                 resObj[parentKey+"."+Key]=tmpVal.join(",");
                             }
                             else{
                                 var nowIndex=0;
                                 for(var arrIndex in tmpVal){
                                     var childItem=tmpVal[arrIndex];
                                     _recursive_parseJson2Form_(resObj,parentKey+"."+Key+"["+ nowIndex+"]", childItem);
                                     nowIndex++;
                                 }
                             }
                         }
                     }


                 }

             }
         }
         var testObj={
             "key1":"dgdggggg"
             ,"key2":"dfdfdfdg白"
             ,arrObj:[
                 {
                     "yao":"你做什么来了？？"
                     ,"yaoCe":"不知道呀。"
                     ,"complexObj":{
                     "t1":"名字"
                     ,"t2":[
                        1,2
                        ]
                     ,"t3":{
                         "what":"dfdffd"
                     }
                     ,"t4":[
                         {
                             "gdgdgg":""
                         },{"gggdddd":""}
                     ]
                        }
                 },
                 {
                     "dfdfyao":"这是郝劭文癸？？"
                     ,"yaoCxxxxe":"不知道呀。"
                 }
             ]
             ,"key3":[1,2,3]
             ,"dataInfo":{
                 "userName":"黑色换线"
                 ,"age":"没有的事"
                 ,"sex":3
                 ,"gggggg":[
                     {"aa":"a"}
                     ,{"bb":"b"}
                 ]
             }
             ,"hello":["xxx","yy","zz"]
         };
         var book={
             id:1
             ,name:"我的足迹"
             ,tags:[
                 {id:1,bookId:1,name:"旅行游记"}
                 ,{id:2,bookId:1,name:"风景"}
             ]
         };

测试如下：
直接在控制台输入命令

好了，该文章首先发布于个人博客http://www.52play.net 同步发布于个人csdn博客：https://blog.csdn.net/cdnight/