Json转换Form

转载 2013年12月03日 14:41:57

Json转换Form(Json2Form Plugin)  

2011-03-03 10:57:00|  分类: JQuery |字号 订阅

/* 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+

Json转FormData 格式

将json转成Content-Type:multipart/form-data;         let form = new FormData();         form.append("p...
  • qq_27727251
  • qq_27727251
  • 2017年12月08日 11:25
  • 537

Json对象与Json字符串互转(4种转换方式)表单提交和表单序列化

Json字符与Json对象的相互转换方式有很多,接下来将为大家一一介绍下 1>jQuery插件支持的转换方式: $.parseJSON( jsonstr ); //jQuery.parseJSON(...
  • bujibo
  • bujibo
  • 2017年04月18日 10:38
  • 389

Ajax利用FormData提交文件和数据

一、ajax提交纯表单(不包含文件或二进制或非ASCII数据)      ajax提交表单绕了很久,遇到一些问题进行测试下以加深理解,测试使用浏览器 49.0.2623.110 m,HTML使用HT...
  • liangwenmail
  • liangwenmail
  • 2016年07月15日 21:33
  • 11087

post方式中multipart/form-data类型转json

原创文章,转载请注明        在表单以post方式提交的时候,其post和普通的post是存在差异的。具体表现在请求头和请求体中        当然,在成熟的框架中,这个问题是已经解决的...
  • guduyishuai
  • guduyishuai
  • 2017年03月03日 15:08
  • 3148

js实现form2json轻量框架

github源码地址: https://github.com/MrITzhongzi/tool-functions/tree/master/%E8%A1%A8%E5%8D%95form2json ...
  • ITzhongzi
  • ITzhongzi
  • 2017年08月31日 10:34
  • 462

form2json实例

JSON解析之JSONObject对象---js对象转换成java对象 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解...
  • yangfanend
  • yangfanend
  • 2011年05月31日 17:36
  • 3211

form表单提交json格式数据

参考自 jQuery实现ajax提交form表单(可以是提交json),用springmvc接收。图文详解个人实践整理。方式一:发送数据 //发送表单ajax请求 $(':submi...
  • n447194252
  • n447194252
  • 2017年09月04日 17:17
  • 718

JQuery加载Json对象到form

$.fn.loadJson = function(jsonValue) { var obj = this; $.each(jsonValue, function(name, ival)...
  • chen517611641
  • chen517611641
  • 2016年07月27日 22:41
  • 1355

将form表单里的数据封装成对象 json2.js的例子 jquery的serialize方法转换空格为+号的解决方法

将form表单里的数据封装成json对象即object,在后台中用usr就能接收全部参数了。可适用于strts2,easyUI的DataGrid 传参等 需要引用的js库有jquery 和  json...
  • xiaojin21cen
  • xiaojin21cen
  • 2015年01月21日 10:30
  • 11165

jquery-json2form

jquery-json2form
  • ccecwg
  • ccecwg
  • 2013年12月03日 14:38
  • 1332
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Json转换Form
举报原因:
原因补充:

(最多只允许输入30个字)