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:
http://code.google.com/p/jquery-json2form/

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/
源代码的下载:
         http://code.google.com/p/jquery-json2form
 


在网页的头加入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...

Ajax利用FormData提交文件和数据

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

js实现form2json轻量框架

github源码地址: https://github.com/MrITzhongzi/tool-functions/tree/master/%E8%A1%A8%E5%8D%95form2json ...

form2json实例

JSON解析之JSONObject对象---js对象转换成java对象 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解...

jquery自动将form表单封装成json

姓名:                                                                                      ...

form 转json最佳示例

form 转json最佳示例

如何把一个表单form变成Json对象

在很多情况下,我们需要把一个表单变成一个Json对象,好比我们在登录页面,我们有用户名和密码2个输入框,我们期望我可以通过一个方法把它Json对象,如下: { "Username":"TestName...

json2form

function test() { var json = $("form").form2json(); $.post("Default3.aspx", ...
  • yenange
  • yenange
  • 2013年03月07日 23:24
  • 3362

httpClient 使用multipart/form-data 类型上传文件及表单

public static void post() throws ClientProtocolException, IOException {/**设置代理*/ // Proxy p=new Pro...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Json转换Form
举报原因:
原因补充:

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