JS多个表单数据提交下的serialize()应用实例分析


Posted in Javascript onAugust 27, 2019

本文实例讲述了JS多个表单数据提交下的serialize()应用。分享给大家供大家参考,具体如下:

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

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

这个时候,出于不依赖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()的要求。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 #Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 #Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 #Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 #Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 #Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 #Javascript
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
开启PHP的伪静态模式
2015/12/31 PHP
Open and Print a Word Document
2007/06/15 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python中的super用法详解
2015/05/28 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
股东合作协议书
2014/04/14 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
初中英语课后反思
2014/04/25 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
中小学生学籍证明
2014/10/25 职场文书
2014年护理部工作总结
2014/11/14 职场文书
后勤工作个人总结
2015/02/28 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android