快捷導(dǎo)航
javascript表單域與json數(shù)據(jù)間的交互第1/3頁(yè)

更新時(shí)間：2008年10月16日 23:08:27 作者：
找了幾個(gè)javascript的框架，都沒(méi)有找到我想要的：提供函數(shù)，把某個(gè)表單的所有域封裝成json數(shù)據(jù)格式的對(duì)象，唯有自己實(shí)現(xiàn)一個(gè)。
包括對(duì)象中有集合屬性、對(duì)象中引用其他對(duì)象屬性：
/** 
**json對(duì)象數(shù)據(jù)設(shè)置到表單域中 
*/ 
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數(shù)據(jù)結(jié)構(gòu) 
            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數(shù)組讀寫(xiě)有兩種方式 
* 1: a.bs[0].id 
* 2: a["bs"][0]["id"] 
* 把表單轉(zhuǎn)換成json數(shù)據(jù)格式 
*/ 
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'); 
                } 
                //判斷是否是對(duì)象類(lèi)型數(shù)據(jù) 
                if(eName.indexOf('.') > 0){ 
                    dotIndex = eName.indexOf('.'); 
                    parentName = eName.substring(0, dotIndex); 
                    childName = eName.substring(dotIndex+1); 
                    //迭代判斷eName，組裝成json數(shù)據(jù)結(jié)構(gòu) 
                    iterJsonObject(jsonObject, parentName, childName, eValue); 
                }else{ 
                    jsonObject[eName] = eValue; 
                } 
                break; 
            case 'button': 
            case 'file': 
            case 'image': 
            case 'reset': 
            case 'submit': 
            default: 
        } 
    } 
    return jsonObject; 
} 

/** 
* 把表單元素迭代轉(zhuǎn)換成json數(shù)據(jù) 
*/ 
function iterJsonObject(jsonObject, parentName, childName, eValue){ 
    //pArrayIndex用于判斷元素是否是數(shù)組標(biāo)示 
    pArrayIndex = parentName.indexOf('['); 
    //判斷是否集合數(shù)據(jù)，不是則只是對(duì)象屬性 
    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數(shù)組，則初始化一個(gè)數(shù)組類(lèi)型 
        if(!pArray){ 
            jsonObject[parentName.substring(0, pArrayIndex)] = new Array(); 
        } 
        //取得集合下標(biāo)，并判斷對(duì)應(yīng)下標(biāo)是否存在js對(duì)象 
        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數(shù)據(jù)對(duì)象設(shè)置到表單域中 
*/ 
function iterValueFromJsonObject(jsonObject, parentName, childName){ 
    //pArrayIndex用于判斷元素是否是數(shù)組標(biāo)示 
    pArrayIndex = parentName.indexOf('['); 
    //判斷是否集合數(shù)據(jù)，不是則只是對(duì)象屬性 
    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)]; 
        //取得集合下標(biāo)，并判斷對(duì)應(yīng)下標(biāo)是否存在js對(duì)象 
        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] 
        } 
    } 
}