form表单序列化详解（推荐）

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

结果：

方法二

 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<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表单序列化提交 # 表单序列化是什么 # 关于jquery form表单序列化的注意事项详解 # jquery form表单序列化为对象的示例代码 # jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法 # 表单序列化与jq中的serialize使用示例 # jquery将一个表单序列化为一个对象的方法 # 基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象） # jQuery将表单序列化成一个Object对象的实例 # JS中from 表单序列化提交的代码 # 表单 # 中也 # 键值 # 序列化 # textarea # description # rows # cols # checkbox # password # type # passsword # salery # hidden # Male # Female # sex # nbsp # function # js

返回目录在线咨询

上一篇：如何使用 Sitemap 提升网站收录效率_SEO优化教程
下一篇：网站服务器安全设置指南：防火墙配置与漏洞修复策略

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

form表单序列化详解（推荐）

您的项目需求