当前位置：首页> 正文

javascript表单域与json数据间的交互第1/3页

找了几个javascript的框架，都没有找到我想要的：提供函数，把某个表单的所有域封装成json数据格式的对象，唯有自己实现一个。

包括对象中有集合属性、对象中引用其他对象属性：

/** 
**json对象数据设置到表单域中 
*/ 
function jsonObjectToForm(form, jsonObject){ 
    for(i = 0, max = form.elements.length; i         e = form.elements[i]; 
        eName = e.name; 
        if(eName.indexOf('.') > 0){ 
            dotIndex = eName.indexOf('.'); 
            parentName = eName.substring(0, dotIndex); 
            childName = eName.substring(dotIndex+1); 
            //迭代判断eName，组装成json数据结构 
            eValue = iterValueFromJsonObject(jsonObject, parentName, childName); 
        }else{ 
            eValue = jsonObject[eName]; 
        } 
        if(eValue && eValue != "undefined" && eValue != "null"){ 
            switch(e.type){ 
                case 'checkbox': 
                case 'radio': 
                    if(e.value == eValue){ 
                        e.checked = true; 
                    } 
                    break; 
                case 'hidden': 
                case 'password': 
                case 'textarea': 
                case 'text': 
                    e.value = eValue; 
                    break; 
                case 'select-one': 
                case 'select-multiple': 
                    for(j = 0; j                         op = e.options[j]; 
                        //alert("eName : " + eName + "; op value : " + op.value + "; eValue : " + eValue); 
                        if(op.value == eValue){ 
                            op.selected = true; 
                        } 
                    } 
                    break; 
                case 'button': 
                case 'file': 
                case 'image': 
                case 'reset': 
                case 'submit': 
                default: 
            } 
        } 
    } 
} 

/** 
* json数组读写有两种方式 
* 1: a.bs[0].id 
* 2: a["bs"][0]["id"] 
* 把表单转换成json数据格式 
*/ 
function formToJsonObject(form){ 
    var jsonObject = {}; 
    for(i = 0, max = form.elements.length; i         e = form.elements[i]; 
        em = new Array(); 
        if(e.type == 'select-multiple'){ 
            for(j = 0; j                 op = e.options[j]; 
                if(op.selected){ 
                    em[em.length] = op.value; 
                } 
            } 
        } 
        switch(e.type){ 
            case 'checkbox': 
            case 'radio': 
                if (!e.checked) { break; } 
            case 'hidden': 
            case 'password': 
            case 'select-one': 
            case 'select-multiple': 
            case 'textarea': 
            case 'text': 
                eName = e.name; 
                if(e.type == 'select-multiple'){ 
                    eValue = em; 
                }else{ 
                    eValue = e.value.replace(new RegExp('(["\\\\])', 'g'), '\\$1'); 
                } 
                //判断是否是对象类型数据 
                if(eName.indexOf('.') > 0){ 
                    dotIndex = eName.indexOf('.'); 
                    parentName = eName.substring(0, dotIndex); 
                    childName = eName.substring(dotIndex+1); 
                    //迭代判断eName，组装成json数据结构 
                    iterJsonObject(jsonObject, parentName, childName, eValue); 
                }else{ 
                    jsonObject[eName] = eValue; 
                } 
                break; 
            case 'button': 
            case 'file': 
            case 'image': 
            case 'reset': 
            case 'submit': 
            default: 
        } 
    } 
    return jsonObject; 
} 

/** 
* 把表单元素迭代转换成json数据 
*/ 
function iterJsonObject(jsonObject, parentName, childName, eValue){ 
    //pArrayIndex用于判断元素是否是数组标示 
    pArrayIndex = parentName.indexOf('['); 
    //判断是否集合数据，不是则只是对象属性 
    if(pArrayIndex <0){ 
        var child = jsonObject[parentName]; 
        if(!child){ 
            jsonObject[parentName] = {}; 
        } 
        dotIndex = childName.indexOf('.'); 
        if(dotIndex > 0){ 
            iterJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue); 
        }else{ 
            jsonObject[parentName][childName] = eValue; 
        } 
    }else{ 
        pArray = jsonObject[parentName.substring(0, pArrayIndex)]; 
        //若不存在js数组，则初始化一个数组类型 
        if(!pArray){ 
            jsonObject[parentName.substring(0, pArrayIndex)] = new Array(); 
        } 
        //取得集合下标，并判断对应下标是否存在js对象 
        arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1); 
        var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex]; 
        if(!c){ 
            jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex] = {}; 
        } 
        dotIndex = childName.indexOf('.'); 
        if(dotIndex > 0){ 
            iterJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1), eValue); 
        }else{ 
            jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName] = eValue; 
        } 
    } 
} 

/** 
* 迭代json数据对象设置到表单域中 
*/ 
function iterValueFromJsonObject(jsonObject, parentName, childName){ 
    //pArrayIndex用于判断元素是否是数组标示 
    pArrayIndex = parentName.indexOf('['); 
    //判断是否集合数据，不是则只是对象属性 
    if(pArrayIndex <0){ 
        dotIndex = childName.indexOf('.'); 
        if(dotIndex > 0){ 
            return iterValueFromJsonObject(jsonObject[parentName], childName.substring(0, dotIndex), childName.substring(dotIndex+1)); 
        }else{ 
            return jsonObject[parentName][childName] 
        } 
    }else{ 
        pArray = jsonObject[parentName.substring(0, pArrayIndex)]; 
        //取得集合下标，并判断对应下标是否存在js对象 
        arrayIndex = parentName.substring(pArrayIndex+1, parentName.length-1); 
        var c = jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex]; 
        dotIndex = childName.indexOf('.'); 
        if(dotIndex > 0){ 
            return iterValueFromJsonObject(jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex], childName.substring(0, dotIndex), childName.substring(dotIndex+1)); 
        }else{ 
            return jsonObject[parentName.substring(0, pArrayIndex)][arrayIndex][childName] 
        } 
    } 
}