Home > Web Front-end > JS Tutorial > Interaction between javascript form fields and json data Page 1/3_json

Interaction between javascript form fields and json data Page 1/3_json

PHP中文网
Release: 2016-05-16 18:59:58
Original
855 people have browsed it

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

/** 
**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] 
        } 
    } 
}
Copy after login


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template