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 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
PyQt5实现下载进度条效果
2018/04/19 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python 画条形图(柱状图)实例
2020/04/24 Python
django使用channels实现通信的示例
2020/10/19 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
农救科工作职责
2013/11/27 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
求职信格式要求
2014/05/23 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
军人离婚协议书样本
2014/10/21 职场文书
2014年少先队工作总结
2014/12/03 职场文书
2015年教学工作总结
2015/04/02 职场文书
校园之声广播稿
2015/08/18 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书