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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
javascript检查表单数据是否改变的方法
Jul 30 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
Dec 23 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
微信小程序数据分析之自定义分析的实现
Aug 17 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
JavaScript交换变量常用4种方法解析
Sep 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
PHP之COOKIE支持详解
2010/09/20 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python中类的继承代码实例
2014/10/28 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
Python判断有效的数独算法示例
2019/02/23 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python扫描端口的实现
2021/01/25 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
.NET程序员的几道面试题
2012/06/01 面试题
大专应届生个人简历的自我评价
2013/10/15 职场文书
四好少年事迹材料
2014/01/12 职场文书
学校光盘行动倡议书
2015/04/28 职场文书
Python3接口性能测试实例代码
2021/06/20 Python