jDataExchange——一个用来做html界面元素与json数据进行交换的javascript库
发布于 1 年前 作者 zyq5945 913 次浏览 来自 分享

描述

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

jDataExchange采用是JS+DOM的方式进行编写的,所以jDataExchange可以与其他框架如React,PHP等无缝对接使用。

jDataExchange与html5的formdata的区别: 优点:

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

缺点:

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

示例在表单中使用

simple.gif

示例在显示标签中使用

display.gif

如何使用

  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地址**欢迎大家issue和star。

3 回复

@450570469 谢谢支持

添加了react与PHP使用例子,比react的LinkedStateMixin双向数据绑定代码简单方便。 欢迎大家提issue和star。

回到顶部