js实现form2json轻量框架

最新推荐文章于 2018-11-23 22:01:03 发布
最新推荐文章于 2018-11-23 22:01:03 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITzhongzi/article/details/77741908
版权

github源码地址：

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


使用文档：

fotm2date: 使用文档
  1、引入js文件 
        <script src="./form2json.js"></script>
  2、调用暴露的全局方法
         var formObj = formInterface()    //返回一个form相关对象，各种方法就封装在这个对象里
  3、调用form2JSon方法，传入一个父盒子的id，返回一个 由input的name和value组成的 对象
        var dataObj = formObj.form2JSon('form')


  
  注释：formInterface() 对象返回的对象中的方法解析： 
    1、form2JSon 传入一个父盒子的id，返回一个 由input的name和value组成的 对象



框架js源码：（很简单的）

/**
* lihongwei
* 2017/8/30
*/
( function () {
var reObj = {}
function form2JSon ( id) {
return new FormToJson(id)
}
function FormToJson ( id) {
this. init(id)
return returnData()
}
var prototype = {
init: function ( id) {
var box = document. querySelector( '#form')
traversal(box)
}
}
function traversal ( boxDom) {
var doms = boxDom.children
Array.prototype.forEach. call(doms, function ( element) {
if (element.tagName === 'INPUT') {
if (element.type === 'radio') {
dealRadio(element)
} else if (element.type === 'checkbox') {
dealCheckbox(element)
} else {
var name = element. getAttribute( 'name')
var value = element.value
reObj[name] = value
}
} else if (element.tagName === 'SELECT') {
var selectName = element. getAttribute( 'name')
var selectVal = element.value
reObj[selectName] = selectVal
} else {
if (element.children.length !== 0) {
traversal(element)
}
}
})
}
function dealRadio ( element) {
var radioName = element. getAttribute( 'name')
var radioEles = document. querySelectorAll( 'input[name="' + radioName + '"]')
for ( var j = 0; j < radioEles.length; j ++) {
if (radioEles[j].checked) {
reObj[radioName] = radioEles[j].value
}
}
}
function dealCheckbox ( element) {
var checkArr = []
var checkName = element.name
var checkEles = document. querySelectorAll( 'input[name="' + checkName + '"]')
for ( var i = 0; i < checkEles.length; i ++) {
if (checkEles[i].checked) {
checkArr. push(checkEles[i].value)
}
}
reObj[checkName] = checkArr
}
function returnData () {
return reObj
}
/**
* 暴露的借口
* form2JSon： 传入盒子的id 返回 由input的name和value组成的 对象
*
*/
function formInterface () {
return {
form2JSon: form2JSon
}
}
FormToJson.prototype = prototype
window.formInterface = formInterface
})()


实例demo：


<!DOCTYPE html>
< html lang= "en">
< head>
< meta charset= "UTF-8">
< meta name= "viewport" content= "width=device-width, initial-scale=1.0">
< meta http-equiv= "X-UA-Compatible" content= "ie=edge">
< title>form2json</ title>
</ head>
< body>
< div id= "form">
< div>
< input type= "text" name= "haha000">
< div>
< div>
< div>
< input type= "text" name= "haha">
</ div>
< select name= "select" id= "">
< option value= "0000">99</ option>
</ select>
</ div>
< input type= "text" name= "haha111">
< input type= "text" name= "haha222">
< input type= "text" name= "haha333">
</ div>
</ div>
< select name= "wwww" id= "">
< option value= "0">请选择</ option>
< option value= "1">22</ option>
< option value= "2">22</ option>
< option value= "3">22</ option>
< option value= "4">22</ option>
</ select>
< input type= "radio" value= "1" name= "sex">
< input type= "radio" value= "2" name= "sex" checked>
< input type= "checkbox" value= "1" name= "sex1">
< input type= "checkbox" value= "2" name= "sex1" checked>
< input type= "checkbox" value= "4" name= "sex1">
< input type= "checkbox" value= "6" name= "sex1" checked>
</ div>
< input type= "checkbox" value= "1" name= "sex">
< input type= "checkbox" value= "2" name= "sex" checked>
< button>生成</ button>
</ body>
< script src= "./form2json.js"></ script>
< script>
var btn = document. querySelector( 'button')
btn. onclick = function(){
var formObj = formInterface()
var dataObj = formObj. form2JSon( 'form')
console. log( JSON. stringify(dataObj))
}
</ script>
</ html>


ITzhongzi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
form数据与json对象的互相转换(完整版)
05-15
form数据与json对象的互相转换(完整版) * 将web Form 的数据转化成json字符串 * 将json对象的值解析后填入web Form 在AJAX开发中这是关键技术： 1、将form中的数据利用本工具转换成json格式的字符串，再通过ajax传给服务器，从而可以实现无刷新的form提交。； 2、通过AJAX从服务器得到json格式的数据，然后使用本工具解析数据填入form。从而可以实现无刷新的页面内容更新。
form2json实例
不断出发，永无抵达！
05-31 3857
<br />JSON解析之JSONObject对象---js对象转换成java对象 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它是大家熟悉的javascript客户端脚本的一个子集。JSON采用完全独立于语言的文本格式，它是一款非常理想的数据交换语言。其中文网站是http://www.json.org/json-zh.html，详细阐述了JSON的概念和数据格式等等，大家如果感兴趣的话可以去浏览一下。 在简要的概
form转json方法
菜鸟vs程序员的专栏
10-23 2152
一个github上的开源jquery项目，用来把form转成json，很好用 项目地址： https://github.com/marioizquierdo/jquery.serializeJSON/blob/master/jquery.serializejson.js /*! SerializeJSON jQuery plugin. https://github.com/mar
前端from表单序列化json插件依赖json2 jquery
04-01
from表单序列化json插件 , 插件支持key-value数据的存储 one-many
form-2-json:读取表单并创建漂亮的JSON对象
05-02
形式2-json >>>正在进行中-暂时忽略此程序包！ <<< 轻巧且快速的纯Javascript插件，用于将HTML表单序列化为键/值对（JSON）对象。 该插件背后的主要思想是能够理解name属性内的dot notation ，以获得更有意义的输出。 为了简单起见，我将使该模块尽可能简单和轻便。 如果您有任何想法，我们可以讨论将其集成到内部的方法，也可以只是将其分叉并自行发展。
js-form-generator:从 json 和模板生成表单
06-14
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在`js-form-generator`中，JSON对象用于描述表单的结构，包括字段类型、名称、标签、默认值等属性。...
若依框架前端form-generator升级为最新版本，添加json解析器，将json配置解析为页面
最新发布
03-01
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在form-generator中，JSON配置文件通常包含了表单的所有细节，如字段类型、标签、必填标志、输入限制...
js结合json实现ajax简单实例
12-10
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON基于JavaScript的一个子集，通常用于传输数据，因为它的结构与JavaScript对象非常相似，这使得在...
html对应的文件中 将form 表单数据 转化为json 格式
06-10
在HTML页面中，表单（`form`）是用于收集用户输入数据的元素，而JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输。本篇将详细介绍如何在HTML表单中收集数据，并利用jQuery的`...
比较Ajax的三种实现及JSON解析
10-23
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在Ajax请求中，服务器通常会返回JSON数据，客户端需要解析这些数据以供使用。在JavaScript中，解析...
form表单转换为json
happy_meng
12-24 971
form表单转换为json在你的html文件中添加$.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var str=this.serialize(); $(array).each(function(){ if
form 转json最佳示例
iteye_14984的博客
01-18 397
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
Json转换Form
ccecwg的专栏
12-03 4313
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
js Form表单转json格式，及后台接收（多种方法）
qq_40138785的博客
08-09 6万+
  一、serialize()方法 格式：var data = $("#formID").serialize(); 功能：将表单内容序列化成一个字符串。 注意：要使用params = decodeURIComponent(data ,true)进行解码，不然中文数据会乱码。 数据示例：Name=小明&amp;Age=22&amp;Sex=男 后台：获取字符串后，可以到后台进行处理数据。...
JSON生成Form表单（二）
weixin_34219944的博客
11-23 846
JSON配置 JSON表单的配置分为两种，暂且称描述表单信息的为表单配置，描述表单组件信息的为组件配置。JSON表单的配置一定是两种配置的组合。 在开始讲解配置之前先介绍几个专业名词： 表单配置：描述表单信息的配置 组件配置：描述表单组件信息的配置 组件数据：表单组件对应需要展示的数据或者需要提交的数据 逻辑数据：表单内用来控制逻辑的额...
form表单提交json格式数据
热门推荐
另一个世界
09-04 8万+
参考自 jQuery实现ajax提交form表单（可以是提交json），用springmvc接收。图文详解个人实践整理。方式一：发送数据<script type="application/javascript"> //发送表单ajax请求 $(':submit').on('click',function(){ $.ajax({ url:"bu
javaScript StringBuilder、form2Json、form 转换为json 字符串
iteye_20873的博客
03-16 342
    没有依赖 js库 function StringBuilder(){ this._element_ = new Array(); this.append = function(item) { this._element_.push(item); } this.toString = function() { return this._element_.join(...
jQuery 表单数据序列化为json格式
11-01 1万+
jQuery是在web应用中使用的脚本语言之一，因其具有轻量级,易学易用等特点，已广泛应用，其中的ajax封装简化了我们的应用，对其表单数据序列化用如下方法： 1.serialize()方法 　　格式：var data = $("form").serialize(); 　　功能：将表单内容序列化成一个字符串。 　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只
form格式和json 格式的区别
学习记录
08-27 2万+
form格式是一种“键值对”的数据格式，比如： a=1&amp;b=2&amp;c=3 而json格式则类似这样： {"a":1,"b":2,"c":3} 如果传递的数据比较简单，那么两种方式基本上没什么大区别（当然后台接收数据的方式肯定是不同的），但是如果数据比较复杂，比如包含数组、对象等时，就只有json才能胜任了。 此外，如果数据是通过表单提交的，那么当然使用默认的form即可，因...
Vue2.0结合Koa2与MongoDB实现全栈注册登录
Koa2是基于Node.js的轻量级Web应用框架，它提供了处理HTTP请求和响应的强大功能。要安装Koa2，需运行`npm install koa koa-router`。Koa2的中间件机制使得处理路由和验证变得简单，如登录验证通常会涉及到JWT（JSON ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITzhongzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值