欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-18 13:50:09
...
包括对象中有集合属性、对象中引用其他对象属性:
/** 
**json对象数据设置到表单域中 
*/ 
function jsonObjectToForm(form, jsonObject){ 
    for(i = 0, max = form.elements.length; i < max; 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 < e.options.length; 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 < max; i++) { 
        e = form.elements[i]; 
        em = new Array(); 
        if(e.type == 'select-multiple'){ 
            for(j = 0; j < e.options.length; 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] 
        } 
    } 
}