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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
js实现随机点名器精简版
Jun 29 Javascript
ES5和ES6中类的区别总结
Dec 21 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 缓存函数代码
2008/08/27 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
vue实现购物车小案例
2019/09/27 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python中使用PyHook监听鼠标和键盘事件实例
2014/07/18 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python