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

举例说明:

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. Delphi最简化异步选择TCP服务器

    网上Delphi的Socket服务器优良代码,实在少见,索性写个简化的异步Socket服务器,虽然代码较少,但却该有的都有了,使用的是异步选择WSAAsyncSelect,减少了编写线程的繁琐.可能会 ...

  2. Spring.Boot.1 -- 概览

    Spring Boot 是如何简化Java 开发的 SpringBoot的一些重要特征 长久以来,Spring 框架作为Java应用开发的框架地位稳固.最近在云计算.大数据.无结构数据持续化.函数式反 ...

  3. PyTorch学习笔记——softmax和log_softmax的区别、CrossEntropyLoss() 与 NLLLoss() 的区别、log似然代价函数

    1.softmax 函数 Softmax(x) 也是一个 non-linearity, 但它的特殊之处在于它通常是网络中一次操作. 这是因为它接受了一个实数向量并返回一个概率分布.其定义如下. 定义 ...

  4. iOS 导航栏风格

    IOS-导航栏风格 导航控制器可以用几种不同的风格来显示自身.默认风格就是标准的灰色外观.目前支持三种不同的风格. 风    格 描    述 UIBarStyleDefault 默认风格:灰色背景, ...

  5. js页面文字选中后分享实现

    var $sinaMiniBlogShare = function(eleShare, eleContainer) { var eleTitle = document.getElementsByTag ...

  6. 18Spring后置通知

    Spring后置通知,和前置通知类似,直接看代码: package com.cn.spring.aop.impl; //加减乘除的接口类 public interface ArithmeticCalc ...

  7. Memcache 分布式存储 【一致性Hash】crc32

    class memcacheHash { private $_node = array(); private $_nodeData = array(); private $_keyNode = 0; ...

  8. python爬取百度文库所有内容

    转载自 GitHub 的 Jack-Cherish 大神 基本环境配置 版本:python3 系统:Windows 相关模块: import requests import re import jso ...

  9. auto_ptr 实现

    #ifndef MYAUTOPTR_H #define MYAUTOPTR_H template<typename _T> class MyAutoPtr { private: _T* _ ...

  10. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...