在实际开发场景中,难免遇到需要多个表单的数据传递问题。

之所以要进行多表单的数据传递是因为可以进行数据分组,便于数据的维护。

这个时候,出于不依赖jquery的考虑,有一个原生js函数来解决这个问题无疑是最好的。而源自于《JavaScript高级程序设计》一书的serialize()函数就是解决这个问题的最好办法,该函数如下:

  function serialize(form){
var parts = [],
field = null,
i,
len,
j,
optLen,
option,
optValue; for (i=0, len=form.elements.length; i < len; i++){
field = form.elements[i]; switch(field.type){
case "select-one":
case "select-multiple": if (field.name.length){
for (j=0, optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
}
}
}
break; case undefined: //fieldset
case "file": //file input
case "submit": //submit button
case "reset": //reset button
case "button": //custom button
break; case "radio": //radio button
case "checkbox": //checkbox
if (!field.checked){
break;
}
/* falls through */ default:
//don't include form fields without names
if (field.name.length){
parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
}
}
}
console.log(parts);
return parts.join("&");
}

对于读过《JavaScript高级程序设计》的小伙伴来说,这个函数肯定不陌生;

但是如果我们传递的是一个对象,那么这个函数显然就不符合要求,而在这个开发需求下,我们改下这个函数,改造后函数如下

  function serialize(form){
var parts = {},
field = null,
i,
len,
j,
optLen,
option,
optValue; for (i=0, len=form.elements.length; i < len; i++){
field = form.elements[i]; switch(field.type){
case "select-one":
case "select-multiple": if (field.name.length){
for (j=0, optLen = field.options.length; j < optLen; j++){
option = field.options[j];
if (option.selected){
optValue = "";
if (option.hasAttribute){
optValue = (option.hasAttribute("value") ? option.value : option.text);
} else {
optValue = (option.attributes["value"].specified ? option.value : option.text);
}
//将数据改为对象形式
Object.defineProperty(parts, encodeURIComponent(field.name), {
value:encodeURIComponent(optValue),
enumerable:true //为真表示可枚举,只有可枚举才能出现在JSON.stringify()转换的json数据中
});
}
}
}
break; case undefined: //fieldset
case "file": //file input
case "submit": //submit button
case "reset": //reset button
case "button": //custom button
break; case "radio": //radio button
case "checkbox": //checkbox
if (!field.checked){
break;
}
/* falls through */ default:
//don't include form fields without names
if (field.name.length){
//构建对象
Object.defineProperty(parts, encodeURIComponent(field.name), {
value:encodeURIComponent(field.value),
enumerable:true //为真表示可枚举,只有可枚举才能出现在JSON.stringify()转换的json数据中
}); }
}
}
console.log(parts);
return parts;
}

于是,表单数据改为对象显示。如果有多个表单将表单保存到一个数组之中,利用JSON.stringify()转为json格式,传给后端;

注意:

利用Object.defineProperty创建对象,要加上 enumerable:true,否则json格式中不会出现对应的对象数据。这个纯粹是JSON.stringify()的要求。

本文结束。

多个表单数据提交下的serialize()应用的更多相关文章

  1. 【ASP.NET 问题】System.InvalidOperationException: 对象的当前状态使该操作无效 【大量表单数据提交】错误解决

    出现的问题描述: 当页面的数据量比较大时,出现异常,详细信息: System.InvalidOperationException: 对象的当前状态使该操作无效 问题的原因:出现这个异常的原因是因为微软 ...

  2. Java中上传文件和表单数据提交如何保持数据的一致性?

    学生申请学科竞赛活动,表单中有学科竞赛的申报信息和部分附件,需要做到将上传文件和表单数据提交保持一致性. 将上传文件和插入表单数据放到事务汇总去处理,由于表单的数据我们可以控制,但是上传的文档不好控制 ...

  3. 解决ssm项目表单数据提交到数据库乱码问题

    问题:在ssm整合的项目里,从前台页面获取表单数据存到数据库中乱码 先说解决办法然后分析:问题出在form表单的提交方式上,我的web.xml配置过滤器都已经指定了编码集,为什么没有生效?原因是,对于 ...

  4. django(7)modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用

    一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts import ...

  5. PHP的两种表单数据提交方式

    1 通过隐藏表单提交 //通过隐藏表单提交 if ($_POST['action'] == 'register'){ echo '你提交了数据'; exit(); } ?> <!DOCTY ...

  6. asp.net 表单数据提交,常见方式与错误总结

    在ASP中,我们通常把表单提交到另外一个页面(接受数据页面).但是在ASP.NET中,服务端表单通常都是提交到本页面的,如果我设置 form1.action="test.aspx" ...

  7. (尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)

    自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...

  8. 关于PHP的表单数组提交显示

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta chars ...

  9. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

随机推荐

  1. Hadoop 动态扩容 增加节点

    基础准备 在基础准备部分,主要是设置hadoop运行的系统环境 修改系统hostname(通过hostname和/etc/sysconfig/network进行修改) 修改hosts文件,将集群所有节 ...

  2. Altium Designer 快捷键与技巧

    在PCB中: 布线过程中,换层快捷键:"Ctrl"  + "Shift" + "滚轮". 单独显示顶层或底层:按"SHIFT&qu ...

  3. flask的查询,一对多,多对多

    模型的关联: 一对多 class Role(db.Model): us = db.relationship('User',backref='role',lazy='dynamic') class Us ...

  4. cakephp2.x 一个ajax例子.md

    CakePHP中的ajax还是比较简单,但要注意一些细节. app/View/Layouts下新建ajaxtest.ctp <!DOCTYPE html PUBLIC "-//W3C/ ...

  5. 利尔达仿真器加有人CC3200模块USR-C322上电测试

    1. 使用利尔达的CC3200底板仿真器对有人CC3200模块USR-C322进行烧写,测试. 2. 连接的接口,需要连接6根线,如下,供电测试,第一波测试,输入+++回复a,然后在输入a,返回+OK ...

  6. andriod学习一

    1.Android软件栈       2.Android模拟器        Android SDK 可以通过ADT+Eclipse或者命令行开发,调试,测试应用程序,设备可以使用模拟器或者真实设备, ...

  7. 如何利用Navicat导入/导出mssql中的数据

    sqlserver,在第一次使用该软件进行"连接"的时候,会提示安装"Microsoft Sqlsever Navicat Client.",这时直接点击&qu ...

  8. python+selenium 环境配置

    配置环境: python:3.5 selenium:3.3.0 安装方式:python pip install -u selenium windows: 10 firefox:52 因为firefox ...

  9. IntelliJ IDEA 新建项目

    一 新建一个Java项目 二 新建一个Web项目 三 新建一个Maven项目 四 web.xml常见版本 <?xml version="1.0" encoding=" ...

  10. linux 学习总结---- mysql 总结

    用户的创建 ---->修改 ---->删除用户 create alter drop (数据定义语言 DDL) 授权: insert update delete grant *.* revo ...