js 对有“命名空间”的表单做深度解析
问题描写叙述:一个大表单中,可能包括几十个字段。这些字段在数据库中的映射非常可能不在一张表中,为了降低后台操作的工作量,我们应该在前台提交的时候对数据做初步处理。
举例说明:
如图所看到的:这种一个表单把两张表糅合到一起去了,提交的时候一起提交,但内容并不在同一张表中,实体也不是同一个实体。那么怎样才干把前台传过来的json数据分别帅选出来呢?
在后台也许也是能够做到的。但这种事情应该在前台完毕,比方。以上表单传到后台就应该是这种格式:
{stuInfo:{name:'saler',gender:'F',addr:'BeiJing',age:30},stuCourse:{English:80,Math:70,Computer:90,Software:100}}
这样在后台能够进行模块化处理,不须要一个个来搞(假设一个个搞,字段超过10个,那简直就是灾难)。那么前台获得表单的数据以后应该怎么处理?这是本文讲述的重点。直接上代码。
function getData(deep){var obj = {};var items = [{name:'stuInfo.name',value:'saler'},{name:'stuCourse.English',value:80},{name:'stuInfo.gender',value:'F'},{name:'stuCourse.Math',value:70},{name:'stuInfo.addr',value:'BeiJing'},{name:'stuCourse.Computer',value:90},{name:'stuInfo.age',value:30},{name:'stuCourse.Software',value:100}]if(deep){for(var i = 0;i < items.length;i++){var item = items[i];namespace(obj, item.name, item.value);}}else{for(var i = 0;i < items.length;i++){var item = items[i];obj[item.name] = item.value;}} return obj;
}//命名空间
function namespace(oNamespace,sPackage,value) {var obj = oNamespace;var pkg = "";if(sPackage.indexOf(".")==-1){pkg = sPackage;}else{pkg = sPackage.substr(0,sPackage.indexOf("."));}if(pkg&&!(obj[pkg]&&obj[pkg] instanceof Object)){obj[pkg] = {};}if(sPackage.indexOf(".")!=-1){namespace(obj[pkg],sPackage.substr(sPackage.indexOf(".")+1),value);}else{obj[pkg] = value;}return obj;
}
函数getData中。items表示form各个元素。deep为true是表示要进行深度解析。这样全部的数据都会由前缀决定统一封装成对象。运行结果例如以下:
须要注意的是namespace方法,这种方法的作用就是依据前缀名把对象的路径解析出来,并把value交给最后的那个变量,比方sPackage=a.b.c value=20那么结果就是{a:{b:{c:20}}}假设原始对象(oNamespace)存在,会在该对象的基础上做处理。
说明:本例是依据jquery miniui组件中form组件中的getData方法的功能做的重写,并没有看过其源代码,也许他们的实现方式更好,请读者自己选择尝试。
转载于:https://www.cnblogs.com/wzjhoutai/p/6889309.html
js 对有“命名空间”的表单做深度解析相关推荐
- 评论留言用html怎么做,利用JS实现评论留言发布表单代码
特效描述:利用JS实现 评论留言 发布表单代码.利用JS实现评论留言发布表单代码 代码结构 1. HTML代码 来,说说你在做什么,想什么... 请点击发布试试吧 请填写内容后再发布! window. ...
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
- php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- js 用submit()方法提交表单,页面闪退问题以及解决方法
1.今天遇到一种情况,js使用submit方法提交表单,怎么都提交不过去,加断点倒跳过去了,主要实现的是这样的一个功能,点击一个按钮触发一个方法,在方法底下再提交表单过去,主要代码如下: <bu ...
- js模拟表单html形式,JS模拟并美化的表单控件完整实例
本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法: ...
- js登录特效+ajax提交表单+异步刷新验证
今天成功测试一种js登录特效+ajax提交表单+异步刷新验证,登录时特效提醒,无刷新ajax提交表单,获取验证结果,跳转正式页面:废话不多说,先直接分享代码: 1.主界面index.php 加载的这 ...
- ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析
.modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...
最新文章
- JavaWeb基础—JSP
- asp打印html,asp.net教程之利用ASP在浏览器上打印输出
- 服务器账号密码更改,如何更改服务器用户名和密码
- 软件调试学习笔记(一)—— 调试对象
- 关于对下阶段工作的一些建议10.10
- 为你的AliOS Things应用增加自定义cli命令
- 智能安全实验室-Defendio杀马2.4.0.420-实时防护-内存防护、新浏览器导航界面...
- 噪声产生原因_皮带输送机异常噪声的5种情况、减速机断轴的原因和解决方法...
- php 重定向 post,使用Jquery post时PHP不会重定向
- 不使用软盘加载驱动安装系统的方法--使用nLite集成驱动
- 压缩包上传 压缩并解压缩Rar/Zip
- 相似的核心玩法之下,谁能在“自走棋”的路上走得更远?
- 项目管理六大制约因素_项目管理有哪些主要风险及如何控制
- android sepolicy 最新小结
- 腾讯云CDN2023年1月5日起,将按用户访问的 HTTPS 请求数次数单独计费,对我有影响吗?
- php 如何实现心跳包,Socket心跳机制-JS+PHP实现
- 工资倒挂 你怎么看?工作三年薪资不如毕业生!
- mysql gps数据查询_Mysql数据库中计算两GPS坐标的距离
- ES6 Set() 数组去重
- STM32学习之CAN控制器简介
热门文章
- 随着计算机多媒体技术的产生和发展,多媒体技术及其应用与发展论文(本科)10...
- php内加百度熊掌号,百度熊掌号接入网站页面改造详细步骤
- c语言源程序的下载,编程(C语言源程序代码)
- c# timer 销毁_如果表单应用程序关闭C#,如何防止发生Timer Elapsed事件
- react native 的底部导航栏以及跳转页面带参数
- 【深度学习】基于Torch的Python开源机器学习库PyTorch概述
- 【深度学习入门到精通系列】阿里云人工智能平台的使用方法
- python【蓝桥杯vip练习题库】ALGO-236大小写转换
- 黑盒测试和白盒的区别,有哪些常见的白盒黑盒测试方法
- 智能集群理论优化控制_无人机集群对抗研究的关键问题