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 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php解决约瑟夫环示例
2014/04/09 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
Javascript 篱式条件判断
2008/08/22 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
python读取中文txt文本的方法
2018/04/12 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
python tkinter窗口最大化的实现
2019/07/15 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
自主招生自荐书
2013/11/29 职场文书
道路交通安全实施方案
2014/03/12 职场文书
股权转让意向书
2014/04/01 职场文书
《开国大典》教学反思
2014/04/19 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
mysql中between的边界,范围说明
2021/06/08 MySQL
redis缓存存储Session原理机制
2021/11/20 Redis
python turtle绘图命令及案例
2021/11/23 Python