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

 更新时间:2008年10月16日 23:08:27   作者:  
找了几个javascript的框架,都没有找到我想要的: 提供函数,把某个表单的所有域封装成json数据格式的对象,唯有自己实现一个。
包括对象中有集合属性、对象中引用其他对象属性:
复制代码 代码如下:

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

相关文章

  • 详解Java中String JSONObject JSONArray List<实体类>转换

    详解Java中String JSONObject JSONArray List<实体类>转换

    这篇文章主要介绍了详解String JSONObject JSONArray List<实体类>转换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • js中将字符串转换成json的三种方式

    js中将字符串转换成json的三种方式

    使用ajax的开发项目过程中,经常需要将json格式的字符串返回到前端,前端解析成js对象(JSON )。
    2011-01-01
  • JSON辅助格式化处理方法

    JSON辅助格式化处理方法

    由于结果是以json形式返回的,不容易一眼辨认,所以为了方便,对结果进行了简单的处理,接下来介绍下处理方法,感兴趣的各位可以参考下哈
    2013-03-03
  • json 实例详细说明教程

    json 实例详细说明教程

    这是个人在最近使用json时做的总结,拿出来给没接触过的小弟们晒晒,适用与没接触过json的人员,其中json2。js请到json官网下载。
    2009-10-10
  • json 介绍 js简单实例

    json 介绍 js简单实例

    json全称是JavaScript Object Notation(javaScript对象符号)。JSON是一种结构化的,轻量级的,完全独立于语言的.基于文本的数据传输格式,在许多场合下用来替代xml文件格式。
    2009-12-12
  • 告诉大家什么是JSON

    告诉大家什么是JSON

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
    2008-06-06
  • ajax处理php返回json数据的实例代码

    ajax处理php返回json数据的实例代码

    有时候我们需要ajax处理php返回的json数据,适合经常用php开发的朋友,需要的朋友可以参考下
    2013-01-01
  • json简单介绍

    json简单介绍

    我们知道AJAX技术能够使得每一次请求更加迅捷,对于每一次请求返回的不是整个页面,也仅仅是所需要返回的数据。
    2008-06-06
  • 教你如何使用PHP输出中文JSON字符串

    教你如何使用PHP输出中文JSON字符串

    PHP 和 JavaScript 交互其实很方便,PHP 原生也提供了对 JSON 格式的支持。主要包括 JSON 编码和解码两个函数:
    2014-05-05
  • 如何实现json数据可视化详解

    如何实现json数据可视化详解

    最近在工作中开发一个内部功能时碰到的一个需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享给大家,有需要的朋友们可以参考借鉴,下面来一起看看吧
    2016-11-11

最新评论