form表单序列化详解(推荐)


Posted in Javascript onAugust 15, 2017

form的序列化,即将表单中的键值序列化为可提交的字符串

表单

<form id="target">
  <select name="age">
   <option value="age1">20</option>
   <option value="age2" selected>21</option>
  </select>
  <input name="name" value="Cynthia">
  <label>passsword</label>
  <input type="password" name="password" value="123456">
  <input type="hidden" name="salery" value="3333">
  <textarea name="description" cols="15" rows="5">description</textarea>
  <input type="checkbox" name="hobby" value="football" checked> Football
  <input type="checkbox" name="hobby" value="basketball"> Basketball
  <input type="radio" name="sex" value="Female" checked> Female
  <input type="radio" name="sex" value="Male"> Male
 </form>

方法一 

function serializeForm1(form){ 
   var setForm = ""; 
   for(var key in form){ 
    if(form.hasOwnProperty(key)){ 
     setForm += '"'+form[key].name+'"'+':'+'"'+form[key].value + '"'+',';
    }
   }
   setForm = "{" + setForm.slice(0,setForm.length -1) + "}";
   console.log(setForm);
   // console.log(JSON.parse(setForm));
   return JSON.parse(setForm);
  }
   
  // 调用
  var oForm = document.getElementById('target');
  console.log(serializeForm3(oForm));

结果:

form表单序列化详解(推荐)

方法二

function serializeForm2(form) {
   var parts = [];
   for (var i = 0, i1 = form.elements.length; i < i1; i++) {
    var field = form.elements[i];
    switch (field.type) {
     case 'select-one':
     case 'select-multiple':
      if (field.type.length) {
       for (var j = 0, j1 = field.options.length; j < j1; j++) {
        var option = field.options[j];
        if (option.selected) {
         var optionValue = '';
         if (option.hasAttribute('value') && option.attributes['value'].specified) {
          //specified表明是否有此属性,有的话返回true,若定义了此属性但尚未添加到元素中也返回true。
          optionValue = option.value;
         } else {
          optionValue = optionValue.text;
         }
         parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(optionValue));
        }
       }
      }
      break;
     case undefined:
     case 'file':
     case 'submit':
     case 'reset':
     case 'button':
      break;
     case 'radio':
     case 'checkbox':
      if(!field.checked){
       break;
      }else{
       parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.dataset['index']));
       break;
      }
     default:
      if(field.name.length){
       parts.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value));
      }
    }
   }
   return parts.join('&');
  }
   
  // 调用
  var oForm = document.getElementById('target');
    console.log(serializeForm2(oForm));

结果:

form表单序列化详解(推荐)

方法三

function serializeForm3(form){
   if(!form||form.tagName.toUpperCase()!='FORM'){
    return false;
   }
   var res=[];
   var tag,tagType,tagVal,tagName;
   for(var i=0;i<form.length;i++){
    tag=form[i];
    tagType=form[i].type;
    tagVal=form[i].value;
    tagName=form[i].name; 
    var reg1=/['textarea'|'text'|'passsword'|'label']/g;
    var reg2=/['radio'|'checkbox']/g;
    var reg3=/['select']/g;
    if(reg1.test(tagType)){
     res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal));
    }else if(reg2.test(tagType)&&tag.checked){
     res.push(encodeURIComponent(tagName)+"="+encodeURIComponent(tagVal)); 
    }else if(reg3.test(tagType)){
     for(var j=0;j<tag.options.length;j++){
      if(tag.options[j].selected){
      res.push(encodeURIComponent(tagVal)+"="+encodeURIComponent(tag.options[j].value||tag.options[j].text)); 
      }
     }
    }else{}
   } 
   return res.join(" & ");
  }
   
  // 调用
  var oForm = document.getElementById('target');
  console.log(serializeForm3(oForm));

结果:

form表单序列化详解(推荐)

以上就是本文的全部内容啦,希望对大家有所帮助~

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 #Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 #Javascript
jQuery DOM节点的遍历方法小结
Aug 15 #jQuery
Mongoose实现虚拟字段查询的方法详解
Aug 15 #Javascript
深入浅析Vue不同场景下组件间的数据交流
Aug 15 #Javascript
React应用中使用Bootstrap的方法
Aug 15 #Javascript
JavaScript函数中的this四种绑定形式
Aug 15 #Javascript
You might like
php curl选项列表(超详细)
2013/07/01 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python数据结构树和二叉树简介
2014/04/29 Python
python执行get提交的方法
2015/04/29 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python的移位操作实现详解
2019/08/21 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
员工培训邀请函
2014/01/11 职场文书
网络宣传方案
2014/03/15 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
超级礼物观后感
2015/06/15 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python