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

首頁

web前端

js教程

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

PHP中文网

May 16, 2016 pm 06:59 PM

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

/** 
**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(&#39;.&#39;) > 0){ 
            dotIndex = eName.indexOf(&#39;.&#39;); 
            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 &#39;checkbox&#39;: 
                case &#39;radio&#39;: 
                    if(e.value == eValue){ 
                        e.checked = true; 
                    } 
                    break; 
                case &#39;hidden&#39;: 
                case &#39;password&#39;: 
                case &#39;textarea&#39;: 
                case &#39;text&#39;: 
                    e.value = eValue; 
                    break; 
                case &#39;select-one&#39;: 
                case &#39;select-multiple&#39;: 
                    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 &#39;button&#39;: 
                case &#39;file&#39;: 
                case &#39;image&#39;: 
                case &#39;reset&#39;: 
                case &#39;submit&#39;: 
                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 == &#39;select-multiple&#39;){ 
            for(j = 0; j < e.options.length; j++){ 
                op = e.options[j]; 
                if(op.selected){ 
                    em[em.length] = op.value; 
                } 
            } 
        } 
        switch(e.type){ 
            case &#39;checkbox&#39;: 
            case &#39;radio&#39;: 
                if (!e.checked) { break; } 
            case &#39;hidden&#39;: 
            case &#39;password&#39;: 
            case &#39;select-one&#39;: 
            case &#39;select-multiple&#39;: 
            case &#39;textarea&#39;: 
            case &#39;text&#39;: 
                eName = e.name; 
                if(e.type == &#39;select-multiple&#39;){ 
                    eValue = em; 
                }else{ 
                    eValue = e.value.replace(new RegExp(&#39;(["\\\\])&#39;, &#39;g&#39;), &#39;\\$1&#39;); 
                } 
                //判断是否是对象类型数据 
                if(eName.indexOf(&#39;.&#39;) > 0){ 
                    dotIndex = eName.indexOf(&#39;.&#39;); 
                    parentName = eName.substring(0, dotIndex); 
                    childName = eName.substring(dotIndex+1); 
                    //迭代判断eName，组装成json数据结构 
                    iterJsonObject(jsonObject, parentName, childName, eValue); 
                }else{ 
                    jsonObject[eName] = eValue; 
                } 
                break; 
            case &#39;button&#39;: 
            case &#39;file&#39;: 
            case &#39;image&#39;: 
            case &#39;reset&#39;: 
            case &#39;submit&#39;: 
            default: 
        } 
    } 
    return jsonObject; 
} 

/** 
* 把表单元素迭代转换成json数据 
*/ 
function iterJsonObject(jsonObject, parentName, childName, eValue){ 
    //pArrayIndex用于判断元素是否是数组标示 
    pArrayIndex = parentName.indexOf(&#39;[&#39;); 
    //判断是否集合数据，不是则只是对象属性 
    if(pArrayIndex < 0){ 
        var child = jsonObject[parentName]; 
        if(!child){ 
            jsonObject[parentName] = {}; 
        } 
        dotIndex = childName.indexOf(&#39;.&#39;); 
        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(&#39;.&#39;); 
        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(&#39;[&#39;); 
    //判断是否集合数据，不是则只是对象属性 
    if(pArrayIndex < 0){ 
        dotIndex = childName.indexOf(&#39;.&#39;); 
        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(&#39;.&#39;); 
        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] 
        } 
    } 
}

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn