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 相关文章推荐
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 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
实用函数7
2007/11/08 PHP
php 禁止页面缓存输出
2009/01/07 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
JavaScript实现捕获鼠标坐标
2020/04/12 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python如何修改装饰器中参数
2018/03/20 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
开办大学饮食联盟创业计划书
2014/01/29 职场文书
高校教师岗位职责
2014/03/18 职场文书
简易版租房协议书范本
2014/10/13 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
四年级语文教学反思
2016/03/03 职场文书
导游词之麻姑仙境
2019/11/18 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫