js 对有“命名空间”的表单做深度解析
问题描写叙述:一个大表单中,可能包括几十个字段。这些字段在数据库中的映射非常可能不在一张表中,为了降低后台操作的工作量,我们应该在前台提交的时候对数据做初步处理。
举例说明:
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 对有“命名空间”的表单做深度解析的更多相关文章
- Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
- js 节点 document html css 表单节点操作
js 节点 document html css 表单节点操作 节点操作:访问.属性.创建 (1)节点的访问:firstChild.lastChild.childNodes.parentChild(父子 ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- 在客户端先通过JS验证后再将表单提交到服务器
问题:想要在客户端先通过JS验证后再将表单提交到服务器 参考资料: jQuery 事件 - submit() 方法 试验过程: 服务器端使用PHP <html> <head> ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- Form表单 JSON Content-type解析
Form表单 JSON Content-type解析 1 表单Form概述 在Form表单中,参数一般有: action 表单提交的url method 提交方式:post get name 表单的属 ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
- 【 js 片段 】如何组织表单的默认提交?【亲测有效】
最近做的一个项目,我分到的部分有表单验证.点击了提交按钮,但我并不想让他跳转页面去提交.于是经过各种百度,各种 stackoverflow,各种抱大神腿之后,有了以下解决办法: 重点就是阻止 form ...
随机推荐
- Vue之x-template(2)
将html结构写在一对script标签中,设置type=“x-template” <!DOCTYPE html> <html> <head lang="en&q ...
- BZOJ4832: [Lydsy1704月赛]抵制克苏恩 (记忆化搜索 + 概率DP)
题意:模拟克苏恩打奴隶战对对方英雄所造成的伤害 题解:因为昨(今)天才写过记忆化搜索 所以这个就是送经验了 1A还冲了个榜 但是我惊奇的发现我数组明明就比数据范围开小了啊??? #include &l ...
- 【原】简单shell练习(二)
1.查找awk # cat /etc/passwd |awk -F ':' 'BEGIN {print "name,shell"} {print $1","$7 ...
- PHP 下基于 php-amqp 扩展的 RabbitMQ 简单用例 (五) -- 自动 ACK、手动 ACK、NACK
以 Direct 类型的 交换机和 Queue 的 get 方法为例. producer.php // 连接设置 $conConfig = [ 'host' => '127.0.0.1', 'p ...
- galera cluster安装与配置
由于公司数据量与并发的日渐增大,普通的主从复制已无法满足要求.对比了网上PXC.galera.mysql cluster等方案,最终决定选择galera cluster. 以下为安装步骤: 1.下载g ...
- buf.swap32()
buf.swap32() 返回:{Buffer} 将 Buffer 解释执行为一个32位的无符号整数数组并以字节顺序交换到位.如果 Buffer 的长度不是32位的倍数,则抛出一个 RangeErro ...
- LeetCode(29)Divide Two Integers
题目 Divide two integers without using multiplication, division and mod operator. If it is overflow, r ...
- 杭电 1009 FatMouse' Trade (贪心)
Problem Description FatMouse prepared M pounds of cat food, ready to trade with the cats guarding th ...
- Github ==〉本地(克隆)
[情景] 新员工入职后,一般会将项目下载到本地. [下载(克隆)] 命令 git clone url地址 示例
- java设置项目根目录 工作目录 working dictionary
改变java项目中,绝对路径的根目录 run->run configuration ->Arguments 更改 working dictioinary