首页 web前端 js教程 javascript表单域与json数据间的交互第1/3页_json

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

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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MySQL5.7和MySQL8.0的区别是什么? MySQL5.7和MySQL8.0的区别是什么? Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是两个不同的MySQL数据库版本,它们之间有以下一些主要区别:性能改进:MySQL8.0相对于MySQL5.7有一些性能改进。其中包括更好的查询优化器、更高效的查询执行计划生成、更好的索引算法和并行查询等。这些改进可以提高查询性能和整体系统性能。JSON支持:MySQL8.0引入了对JSON数据类型的原生支持,包括JSON数据的存储、查询和索引。这使得在MySQL中处理和操作JSON数据变得更加方便和高效。事务特性:MySQL8.0引入了一些新的事务特性,如原子

PHP 数组转 JSON 的性能优化技巧 PHP 数组转 JSON 的性能优化技巧 May 04, 2024 pm 06:15 PM

PHP数组转JSON的性能优化方法包括:使用JSON扩展和json_encode()函数;添加JSON_UNESCAPED_UNICODE选项以避免字符转义;使用缓冲区提高循环编码性能;缓存JSON编码结果;考虑使用第三方JSON编码库。

Pandas使用教程:读取JSON文件的快速入门 Pandas使用教程:读取JSON文件的快速入门 Jan 13, 2024 am 10:15 AM

快速入门:Pandas读取JSON文件的方法,需要具体代码示例引言:在数据分析和数据科学领域,Pandas是一个重要的Python库之一。它提供了丰富的功能和灵活的数据结构,能够方便地对各种数据进行处理和分析。在实际应用中,我们经常会遇到需要读取JSON文件的情况。本文将介绍如何使用Pandas来读取JSON文件,并附上具体的代码示例。一、Pandas的安装

Jackson库中注解如何控制JSON序列化和反序列化? Jackson库中注解如何控制JSON序列化和反序列化? May 06, 2024 pm 10:09 PM

Jackson库中的注解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略属性@JsonProperty:指定名称@JsonGetter:使用获取方法@JsonSetter:使用设置方法反序列化:@JsonIgnoreProperties:忽略属性@JsonProperty:指定名称@JsonCreator:使用构造函数@JsonDeserialize:自定义逻辑

深入了解PHP:JSON Unicode转中文的实现方法 深入了解PHP:JSON Unicode转中文的实现方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP:JSONUnicode转中文的实现方法在开发中,我们经常会遇到需要处理JSON数据的情况,而JSON中的Unicode编码在一些场景下会给我们带来一些问题,特别是当需要将Unicode编码转换为中文字符时。在PHP中,有一些方法可以帮助我们实现这个转换过程,下面将介绍一种常用的方法,并提供具体的代码示例。首先,让我们先了解一下JSON中Un

PHP 数组转 JSON 的快捷技巧 PHP 数组转 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP数组可通过json_encode()函数转换为JSON字符串(例如:$json=json_encode($array);),反之亦可用json_decode()函数从JSON转换为数组($array=json_decode($json);)。其他技巧还包括:避免深度转换、指定自定义选项以及使用第三方库。

如何使用 PHP 函数处理 JSON 数据? 如何使用 PHP 函数处理 JSON 数据? May 04, 2024 pm 03:21 PM

PHP提供了以下函数来处理JSON数据:解析JSON数据:使用json_decode()将JSON字符串转换为PHP数组。创建JSON数据:使用json_encode()将PHP数组或对象转换为JSON字符串。获取JSON数据的特定值:使用PHP数组函数访问特定值,例如键值对或数组元素。

PHP教程:如何将JSON Unicode转换为中文字符 PHP教程:如何将JSON Unicode转换为中文字符 Mar 05, 2024 pm 06:36 PM

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,通常用于Web应用程序之间的数据交换。在处理JSON数据时,我们经常会遇到Unicode编码的中文字符(例如"u4e2du6587"),需要将其转换为可读的中文字符。在PHP中,我们可以通过一些简单的方法来实现这个转换。接下来,我们将详细介绍如何将JSONUnico

See all articles