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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
Javascript之文件操作
Mar 07 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
jQuery的position()方法详解
Jul 19 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 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简单封装了一些常用JS操作
2007/02/25 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
PHP 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
基于Python log 的正确打开方式
2018/04/28 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python实现最速下降法
2020/03/24 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
python excel多行合并的方法
2020/12/09 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
DJI美国:消费类无人机领域的领导者
2018/04/27 全球购物
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
《东方明珠》教学反思
2014/04/20 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
PyTorch device与cuda.device用法
2022/04/03 Python
MySQL时区造成时差问题
2022/04/13 MySQL
MySQL事务的ACID特性以及并发问题方案
2022/07/15 MySQL