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

举例说明:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

如图所看到的:这种一个表单把两张表糅合到一起去了,提交的时候一起提交,但内容并不在同一张表中,实体也不是同一个实体。那么怎样才干把前台传过来的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是表示要进行深度解析。这样全部的数据都会由前缀决定统一封装成对象。运行结果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

须要注意的是namespace方法,这种方法的作用就是依据前缀名把对象的路径解析出来,并把value交给最后的那个变量,比方sPackage=a.b.c value=20那么结果就是{a:{b:{c:20}}}假设原始对象(oNamespace)存在,会在该对象的基础上做处理。

说明:本例是依据jquery miniui组件中form组件中的getData方法的功能做的重写,并没有看过其源代码,也许他们的实现方式更好,请读者自己选择尝试。

js 对有“命名空间”的表单做深度解析的更多相关文章

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

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

  2. js 节点 document html css 表单节点操作

    js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...

  3. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

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

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

  5. 在客户端先通过JS验证后再将表单提交到服务器

    问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...

  6. koa 基础(十)原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  7. Form表单 JSON Content-type解析

    Form表单 JSON Content-type解析 1 表单Form概述 在Form表单中,参数一般有: action 表单提交的url method 提交方式:post get name 表单的属 ...

  8. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  9. 【 js 片段 】如何组织表单的默认提交?【亲测有效】

    最近做的一个项目,我分到的部分有表单验证.点击了提交按钮,但我并不想让他跳转页面去提交.于是经过各种百度,各种 stackoverflow,各种抱大神腿之后,有了以下解决办法: 重点就是阻止 form ...

随机推荐

  1. RackTables在LNMP系统的安装及使用

    RackTables是一款优秀的机房管理系统,可以十分方便的登记机房设备和连接情况,非常适合小型机房的运维.RackTables是PHP开发的免费系统,最新版本为0.20.14,PHP版本要求不低于P ...

  2. Less简介及安装

    CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ,它作为前端开发的三大基石之一,时刻引领着 Web 的发展潮向. 而 CSS 作为一门标记性语言,可能 给初学者第一印象 就是简单易懂,毫 ...

  3. PHP 下基于 php-amqp 扩展的 RabbitMQ 简单用例 (四) -- Push API 和 Pull API

    RabbitMQ 中针对消息的分发提供了 Push API (订阅模式) 和 Pull API (主动获取) 两种模式. 在 PHP 中, 这两种模式分别通过 AMQPQueue 类中的 consum ...

  4. JFinal怎么更改项目服务的端口

    如图所示,运行时启动的端口是80,现在将它改成801: 可以在Debug configuration 或 Run configuration 弹出的窗口中配置,方法右击项目>properties ...

  5. vuex如何管理需要即时更新的全局变量

    自己在使用vue练习开发的时候遇到全局变量无法即时更新的问题,查了资料之后得出结论使用vuex能够快速解决该问题,但是看了好多人讲解vuex的教程自己跟着去做都没解决自己想要的,最后找到一个比较容易理 ...

  6. sizeof 感知重载,模板具现, 转换规则

    问题:如何侦知任意型别 T 是否可以自动转换为型别 U? 方案:侦测转换能力的想法:合并运用 sizeof 和重载函数. 1 依赖 sizeof,sizeof 有着惊人的能力,你可以把 sizeof  ...

  7. manacher马拉车算法

    Manacher算法讲解 总有人喜欢搞事情,出字符串的题,直接卡掉了我的40分 I.适用范围 manacher算法解决的是字符串最长回文子串长度的问题. 关键词:最长 回文 子串 II.算法 1.纯暴 ...

  8. 图解C/C++多级指针与多维数组

    声明:本文转自 chenyang_yao ,欢迎阅读原文. 指针与数组是C/C++编程中非常重要的元素,同时也是较难以理解的.其中,多级指针与“多维”数组更是让很多人云里雾里,其实,只要掌握一定的方法 ...

  9. jz2440开发板烧写裸板

    前提:手头没有openjtag,电脑上没有并口, 实现方法:jlink下载,nor上的uboot下载 关键点是用jlink下载uboot 1,使用jlink进行烧写,其中注意的是jlink只能烧写no ...

  10. JS基础:正则表达式

    简介 正则表达式 (regular expression) 描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串.将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等.在 JS ...