问题描写叙述:一个大表单中,可能包括几十个字段。这些字段在数据库中的映射非常可能不在一张表中,为了降低后台操作的工作量,我们应该在前台提交的时候对数据做初步处理。

举例说明:

如图所看到的:这种一个表单把两张表糅合到一起去了,提交的时候一起提交,但内容并不在同一张表中,实体也不是同一个实体。那么怎样才干把前台传过来的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 对有“命名空间”的表单做深度解析相关推荐

  1. 评论留言用html怎么做,利用JS实现评论留言发布表单代码

    特效描述:利用JS实现 评论留言 发布表单代码.利用JS实现评论留言发布表单代码 代码结构 1. HTML代码 来,说说你在做什么,想什么... 请点击发布试试吧 请填写内容后再发布! window. ...

  2. Fort.js – 时尚、现代的表单填写进度提示效果

    Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...

  3. html js文件域val,js实现文件上传表单域美化特效

    一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...

  4. php 美化js文件,js实现文件上传表单域美化特效_javascript技巧

    一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法 这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...

  5. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  6. js 用submit()方法提交表单,页面闪退问题以及解决方法

    1.今天遇到一种情况,js使用submit方法提交表单,怎么都提交不过去,加断点倒跳过去了,主要实现的是这样的一个功能,点击一个按钮触发一个方法,在方法底下再提交表单过去,主要代码如下: <bu ...

  7. js模拟表单html形式,JS模拟并美化的表单控件完整实例

    本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法: ...

  8. js登录特效+ajax提交表单+异步刷新验证

    今天成功测试一种js登录特效+ajax提交表单+异步刷新验证,登录时特效提醒,无刷新ajax提交表单,获取验证结果,跳转正式页面:废话不多说,先直接分享代码: 1.主界面index.php  加载的这 ...

  9. ajax表单提交excel,ajax使用formdata 提交excel文件表单到rails解析

    .modal-body .container-fluid .row .col-md-12 1.下载模板文件 = link_to '模板文件' .row .col-md-12 = form_tag '' ...

最新文章

  1. JavaWeb基础—JSP
  2. asp打印html,asp.net教程之利用ASP在浏览器上打印输出
  3. 服务器账号密码更改,如何更改服务器用户名和密码
  4. 软件调试学习笔记(一)—— 调试对象
  5. 关于对下阶段工作的一些建议10.10
  6. 为你的AliOS Things应用增加自定义cli命令
  7. 智能安全实验室-Defendio杀马2.4.0.420-实时防护-内存防护、新浏览器导航界面...
  8. 噪声产生原因_皮带输送机异常噪声的5种情况、减速机断轴的原因和解决方法...
  9. php 重定向 post,使用Jquery post时PHP不会重定向
  10. 不使用软盘加载驱动安装系统的方法--使用nLite集成驱动
  11. 压缩包上传 压缩并解压缩Rar/Zip
  12. 相似的核心玩法之下,谁能在“自走棋”的路上走得更远?
  13. 项目管理六大制约因素_项目管理有哪些主要风险及如何控制
  14. android sepolicy 最新小结
  15. 腾讯云CDN2023年1月5日起,将按用户访问的 HTTPS 请求数次数单独计费,对我有影响吗?
  16. php 如何实现心跳包,Socket心跳机制-JS+PHP实现
  17. 工资倒挂 你怎么看?工作三年薪资不如毕业生!
  18. mysql gps数据查询_Mysql数据库中计算两GPS坐标的距离
  19. ES6 Set() 数组去重
  20. STM32学习之CAN控制器简介

热门文章

  1. 随着计算机多媒体技术的产生和发展,多媒体技术及其应用与发展论文(本科)10...
  2. php内加百度熊掌号,百度熊掌号接入网站页面改造详细步骤
  3. c语言源程序的下载,编程(C语言源程序代码)
  4. c# timer 销毁_如果表单应用程序关闭C#,如何防止发生Timer Elapsed事件
  5. react native 的底部导航栏以及跳转页面带参数
  6. 【深度学习】基于Torch的Python开源机器学习库PyTorch概述
  7. 【深度学习入门到精通系列】阿里云人工智能平台的使用方法
  8. python【蓝桥杯vip练习题库】ALGO-236大小写转换
  9. 黑盒测试和白盒的区别,有哪些常见的白盒黑盒测试方法
  10. 智能集群理论优化控制_无人机集群对抗研究的关键问题