前言
玩了一下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/