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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
JavaScript实现消消乐的源代码
Jan 12 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP中显示格式化的用户输入
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php socket方式提交的post详解
2008/07/19 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
不安全的常用的js写法
2009/09/15 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
基于javaScript的this指向总结
2017/07/22 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
python实现按关键字筛选日志文件
2019/12/24 Python
PIP和conda 更换国内安装源的方法步骤
2020/09/21 Python
小学生节约用水倡议书
2014/05/15 职场文书
商务英语求职信范文
2015/03/19 职场文书
大学运动会通讯稿
2015/07/18 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
关于python类SortedList详解
2021/09/04 Python