序列化form表单教程详解

这篇文章主要介绍了form表单序列化操作，通过将表单中的键值序列化为可提交的字符串，并附上代码实例详细讲解了运行之后的结果,需要的朋友可以参考下

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

表单

 

  
   20
   21
  
  
  passsword
  
  
  description
   Football
   Basketball
   Female
   Male
 

方法一 

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));

结果：

方法二

Perl 基础教程 chm

Perl 基础入门中文教程，chm格式，讲述PERL概述、简单变量、操作符、列表和数组变量、文件读写、模式匹配、控制结构、子程序、关联数组/哈希表、格式化输出、文件系统、引用、面向对象、包和模块等知识点。适合初学者阅读和了解Perl脚本语言。

下载

 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));

结果：

方法三

 function serializeForm3(form){
   if(!form||form.tagName.toUpperCase()!='FORM'){
    return false;
   }
   var res=[];
   var tag,tagType,tagVal,tagName;
   for(var i=0;i
结果：