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课程安排
状态管理与vuex,即兄弟组件通信(选讲,了解即可)
- 【计算机网络】2.2 Web和HTTP
第二章第二节 Web和HTTP 这一章中,我们需要讨论5种重要的应用:Web.文件传输.电子邮件.目录服务.P2P:这一节中,我们将讨论Web和它的应用层协议HTTP. Outline Web简介 H ...
- 08JavaScript数学与日期时间对象
JavaScript数学与日期时间对象 5.1.3数学(Math)对象 <script> //欧拉常量,自然对数的底(约等于2.718); document.write(Math.E+&q ...
- 数据结构之线性顺序表ArrayList(Java实现)
一.ListMe接口: import java.util.ArrayList; //实现线性表(顺序表和链表)的接口://提供add get isEmpty size 功能public interfa ...
- Ubuntu中update-grub2与update-grub的区别
没有区别. Ubuntu 9.10及更高版本已安装GRUB2,但sudo update-grub仍然以标准命令为准. sudo update-grub和sudo update-grub2是等同的,所以 ...
- 关键字搜索高亮jQuery插件
// textSearch.js v1.0 文字,关键字的页面纯客户端搜索// 2010-06-23 修复多字母检索标签破碎的问题// 2010-06-29 修复页面注释显示的问题// 2013-05 ...
- python爬取百度文库所有内容
转载自 GitHub 的 Jack-Cherish 大神 基本环境配置 版本:python3 系统:Windows 相关模块: import requests import re import jso ...
- MySQL简单查询和单表查询
MySQL记录操作 概览 MySQL数据操作: DML 在MySQL管理软件中,可以通过SQL语句中的DML语言来实现数据的操作,包括 使用INSERT实现数据的插入 UPDATE实现数据的更新 使用 ...
- day21 03 异常处理
day21 03 异常处理 1.什么是异常 异常:程序运行时发生错误的信号 错误:语法错误(一般是不能处理的异常) 逻辑错误(可处理的异常) 特点:程序一旦发生错误,就从错误的位置停下来,不再继续执行 ...
- 慕课笔记利用css进行布局【一列布局】
<html> <head> <title>一列布局</title> <style type="text/css"> bo ...