jDataExchange——一个用来做html界面元素与json数据进行交换的javascript库

描述

为了从繁琐的html的数据表单中进行数据与json数据交换后，表单的元素input,select,textarea等的值属性名称都是固定的不变的，利用javascript的反射机制将json数据对应key与表单元素相应的key(一般是name属性的值作为key)一一对应起来，从而实现了jDataExchange这个库来使用简单的几句JS代码实现了从表单数据获取数据到json数据中与将json数据设置到表单数据中。 jDataExchange与html5的formdata的区别： 优点：

1. 不需要浏览器的html5特性支持，
2. formdata的数据无法设置到表单中

缺点：

1. 不支持file类型的获取与设置

示例在表单中使用

示例在显示标签中使用

如何使用

1. 设计好你的网页界面，例如如下：

<form id="myform">
    Hidden: <input name="_csrf" type="hidden" value=""/> <br/>
    Name: <input name="name" type="text" value="" /> <br/>
    Password: <input name="password" type="password" value="" /> <br/>
    Sex: <input name="sex" type="radio" value="Male" checked="checked"/>
    <input name="sex" type="radio" value="Female"/> <br/>
    Fruit: <input name="fruit" type="checkbox" value="Apple"/>Apple
    <input name="fruit" type="checkbox" value="Banana"/>Banana
    <input name="fruit" type="checkbox" value="Orange"/>Orange <br/>
    Country: <select name="country">
    <option value="">--请选择--</option>
    <option value="中国">中国</option>
    <option value="美国">美国</option>
    </select><br/>
    Note: <textarea name="note"></textarea><br/>
    <input type="reset" value="Reset"/> <br/>
</form>

1. 使用script标签导入jDataExchange

<script type="text/javascript" src="../src/jdataexchange.js"></script>

1. 输入表单后编写如下js代码从界面获取数据值填充到json对象中

var jsonObj = {};
jdx("myform").get(jsonObj);

调用如上js代码后示例的JSON对象填充如下

{
    "_csrf": "xxxxxxxx",
    "note": "xxxxxxxx",
    "name": "xxxxxxxx",
    "password": "xxxxxxxx",
    "sex": {
        "v1": [
        "xxxxxxxx"
        ],
        "v0": [
            "xxxxxxxx"
        ]
    },
    "fruit": {
        "v1": [
            "xxxxxxxx",
            "xxxxxxxx"
        ],
        "v0": [
            "xxxxxxxx"
        ]
    },
    "country": {
        "v1": [
            "xxxxxxxx"
        ],
        "v0": [
            "xxxxxxxx",
            "xxxxxxxx"
        ]
    }
}

1. 将json对象值设置到表单也是在表单加载完成后调用如下js代码

var jsonObj = {...};
jdx("myform").set(jsonObj);

Github地址