/* jQuery json2form Plugin
* version: 1.0 (2011-03-01)
*
* Copyright (c) 2011, Crystal, shimingxy@163.com
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Date: 2011-03-01 rev 1
*/
json2form Plugin based jquery,Simple and util Utility 、OpenSource and FREE.
- javascript object or json value transform to html form element value.
- support local data and remort data using Ajax
- when object or json property name equal to html element attribute name,fill value to element.
- support element input [text password hidden button reset submit checkbox radio] and select textarea
- support element init,checkbox radio select and lable.
Homepage&Blog:
http://blog.163.com/shimingxy/
any questions ,you can visite
download source:
json2form Plugin基于JQuery框架，简单实用，基于开源协议，免费使用。
- 把javascript的对象或者json对象的值转换为html表单元素的值
- 支持本地数据和动态AJAX远程数据。
- 当对象或者json的属性等于html表单元素name属性值，该对象或json属性值赋予该表单元素
- 支持表单元素input [text password hidden button reset submit checkbox radio] 和 select textarea
- 支持初始化表单元素,checkbox radio select 和 lable.
项目博客：http://blog.163.com/shimingxy/
源代码的下载:
在网页的头加入js
<html>
<head>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="json2form.js" type="text/javascript"></script>
</head>
<body>
<form id="json2form" name="json2form">
....
</form>
</body>
</html>
var json2fromdata ={
txt:'文字输入',
pwd:'密码输入',
hd:'隐藏',
are:'多行文字json2form',
btn:'按钮',
rt:'重置按钮',
sb:'提交按钮',
rad:'男',
chk:'chk1',
chk:['美国','中国'],
sl:['法国','日本'],
label:{
txt:'自定义文本框标签',
sl :'自定义下拉列表标签'
},
init:{
chk444:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}],
chk555:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}],
slinit:[{"value":"comm","display":"一般资源"},{"value":"system","display":"系统"},{"value":"page","display":"页面"},{"value":"url","display":"链接"},{"value":"model","display":"模块"},{"value":"data","display":"数据"}]
}
};
1、对象的属性名必须和表单元素name的值对应/object property equal to html element attribute name
2、checkbox select对应的值可以为字符数组，表示多选/if multiple choice,checkbox select value can be string array,
3、label初始化label，label对象的属性必须和表单元素for的值对应/object lable property initialize html label by for value
4、init初始化checkbox radio select，init对象的属性必须和表单元素name的值对应，init对象为对象数组，value为值，display为显示名称
/object init property initialize checkbox radio select,init property initialize html element by attribute name,init is array,value and display
5、init初始化checkbox radio select使用ajax,checkbox radio select有url的属性，则读取url的数据进行初始化。
/initialize checkbox radio select use ajax,if checkbox radio select has url attribute ,read url data initialize html element.
本地调用/local data
$("#json2form").json2form({data:json2fromdata});
远程调用/remote data
$("#json2form").json2form({url:"http://...",data:{id:"json2form",name:"json2form"}});
1、支持浏览器/supported browsers are:
Internet Explorer 6+ *
Mozilla Firefox 3+
Google Chrome
2、未测试浏览器/UnTest browsers are:
Safari 3+
Opera 9+
分享到：
相关推荐
在`json2form.js-master`这个压缩包中，`json2form.js`的源码可能是主要部分，包含了实现上述功能的代码。通常，源码会包含详细的注释和示例，帮助开发者理解和使用这个库。开发者可以通过阅读源码了解其工作原理，...
2. **解析JSON数据**：在成功获取数据后，`success`回调函数中的`data`参数就是JSON对象，我们可以解析它以获取需要的属性。 3. **遍历表单元素**：接下来，遍历HTML表单中的所有元素，通常使用`$('form').find('...
form数据与json对象的互相转换(完整版) * 将web Form 的数据转化成json字符串 * 将json对象的值解析...2、通过AJAX从服务器得到json格式的数据，然后使用本工具解析数据填入form。从而可以实现无刷新的页面内容更新。
在前端开发中，有时我们需要将JSON格式的数据转换成表单（form）的格式进行提交，以便于服务器端处理。在JavaScript的世界里，jQuery库提供了一种便捷的方式来进行这样的转换。本篇文章将深入探讨如何利用jQuery从...
Ajax-JQuery-JSON-Form-Binding.zip,用于将json数据绑定到表单的轻量级插件。对于使用ajax和具有大量字段的表单很有用。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和...
在本主题中，我们将深入探讨如何使用C#来模拟POST请求，以便发送JSON和multipart/form-data格式的数据。这两种数据格式在现代网络应用中非常常见，特别是用于API交互和文件上传。 首先，让我们了解JSON（JavaScript...
在HTML页面中，表单（`form`）是用于收集用户输入数据的元素，而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。本篇将详细介绍如何在HTML表单中收集数据，并利用jQuery的`...
当我们需要上传文件或同时发送键值对（包括复杂的数据结构如JSON）时，通常会使用`multipart/form-data`和JSON这两种数据格式。下面我们将深入探讨如何在C#中实现这两种数据格式的POST请求。 一、`multipart/form-...
Power Builder 12.5，使用ole MSXML2.ServerXMLHTTP方式，对接WEB API，以选用JSON和x-www-form-urlencoded方式提交数据，POST/GET方式均可。
JSON生成Form表单是一种高效的方法，特别是在React等前端框架中，它可以极大提高开发效率和代码复用性。本文将深入探讨这种方法，以及如何利用JSON数据结构来构建动态、灵活的表单。 首先，JSON表单描述是一种将...
2. **自动验证**：基于JSONSchema的验证规则，库会自动处理数据验证，减少了手动检查的需要。 3. **可定制化**：支持自定义小部件，可以轻松地改变表单样式和行为，以满足项目需求。 4. **错误处理**：库自动处理...
通常前端通过POST请求向服务器端提交数据格式有4中，分别是”application/x-www-form-urlencoded”格式、” multipart/form-data”格式、”application/json”格式和”text/xml”格式。通常最常见的是”application/...
vue-jsonschema-form [WIP：未准备好] 基于JSON模式表单生成器 概述 该项目的目的是创建一个简单的Vue组件，该组件能够根据构建HTML表单，并且默认情况下使用语义。 入门 克隆此存储库，安装依赖项并使用dev命令...
将form表单内容转换为json将form表单内容转换为json将form表单内容转换为json
总之，这次若依框架前端form-generator的升级和添加JSON解析器是一个涉及到多个技术层面的过程，包括但不限于JSON解析、前端组件升级、兼容性测试以及UI调整。这样的升级能够使开发团队利用更先进的工具，提高开发...
Struts2的JSON插件正是为了方便开发者在Struts2框架中处理JSON数据而设计的。 首先，让我们深入了解JSON。JSON是一种独立于语言的数据交换格式，具有易于人阅读和编写，同时也易于机器解析和生成的特点。它的数据...
* 将web Form 的数据转化成json字符串的函数 * howwa@sina.com 根据网上搜的资料修改而成 * 2011-5-14 * 将web Form 采集的数据转化成json字符串 * 传入web form对象 * 输出由form元素名称及其值组成的json字符串 *...
json-obj-form-generator 从JSON对象生成表单安装npm install --save json-obj-form-generator 有关更多信息，请查看有关沙箱（游乐场），设计师翻译生成器等的文档。设计者的用法import { JOFGENDesigner } from '...
在标题和描述提到的场景中，我们需要创建一个jQuery扩展，将复杂的form表单数据转换为JSON对象。这通常涉及到遍历表单元素，获取它们的值，并构建JSON对象。以下是一个简单的示例： ```javascript (function($) { ...
form2js 是一个用来将 HTML 表单转成 JSON 对象的 jQuery 插件。例如这样的表单：<input type="text" name="person.name.first" value="John" /> <input type="text" name="person.name.last" value...