将JavaScript的jQuery库中表单转化为JSON对象的方法


Posted in Javascript onNovember 17, 2015

大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。
 
我在网上看到有人用替换的方法,先用serialize序列化后,将&替换成“:”、“‘”:

/**
* 重置form表单
* @param formId form的id
*/
function resetQuery(formId){
var fid = "#" + formId;
var str = $(fid).serialize();
//str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04
var ob= strToObj(str);
alert(ob.startdate); //2012-02-01
}
function strToObj(str){
str = str.replace(/&/g, "','" );
str = str.replace(/=/g, "':'" );
str = "({'" +str + "'})" ;
obj = eval(str);
return obj;
}

/** 
   * 重置form表单 
   * @param formId form的id  
   */  
  function resetQuery(formId){  
    var fid = "#" + formId;  
    var str = $(fid).serialize();  
    //str= cardSelectDate=3&startdate=2012-02-01&enddate=2012-02-04  
    var ob= strToObj(str);  
    alert(ob.startdate);//2012-02-01  
  }  
    
  function strToObj(str){  
    str = str.replace(/&/g,"','");  
    str = str.replace(/=/g,"':'");  
    str = "({'"+str +"'})";  
    obj = eval(str);   
    return obj;  
  }

个人感觉这样做有bug。
 我的方法是,先用serializeArray序列化为数组,再封装为Json对象。
 下面是表单:

< form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< input type = "submit" />
</ form >

<form id="myForm" action="#"> 
  <input name="name"/> 
  <input name="age"/> 
  <input type="submit"/> 
</form>

Jquery插件代码如下:
 

( function ($){
$.fn.serializeJson= function (){
var serializeObj={};
$( this .serializeArray()).each( function (){
serializeObj[ this .name]= this .value;
});
return serializeObj;
};
})(jQuery);

(function($){ 
    $.fn.serializeJson=function(){ 
      var serializeObj={}; 
      $(this.serializeArray()).each(function(){ 
        serializeObj[this.name]=this.value; 
      }); 
      return serializeObj; 
    }; 
  })(jQuery);

 
 
下面测试一下:

$("#myForm").bind("submit",function(e){

e.preventDefault();
console.log($( this ).serializeJson());
});

  e.preventDefault(); 
  console.log($(this).serializeJson()); 
});

测试结果:
输入a,b提交,得到序列化结果

{age: "b",name: "a"}

 
 
上面的插件,不能适用于有多个值的输入控件,例如复选框、多选的select。下面,我将插件做进一步的修改,让其支持多选。代码如下:
 

( function ($){
$.fn.serializeJson= function (){
var serializeObj={};
var array= this .serializeArray();
var str= this .serialize();
$(array).each( function (){
if (serializeObj[ this .name]){
if ($.isArray(serializeObj[ this .name])){
serializeObj[ this .name].push( this .value);
} else {
serializeObj[ this .name]=[serializeObj[ this .name], this .value];
}
} else {
serializeObj[ this .name]= this .value;
}
});
return serializeObj;
};
})(jQuery);

(function($){ 
    $.fn.serializeJson=function(){ 
      var serializeObj={}; 
      var array=this.serializeArray(); 
      var str=this.serialize(); 
      $(array).each(function(){ 
        if(serializeObj[this.name]){ 
          if($.isArray(serializeObj[this.name])){ 
            serializeObj[this.name].push(this.value); 
          }else{ 
            serializeObj[this.name]=[serializeObj[this.name],this.value]; 
          } 
        }else{ 
          serializeObj[this.name]=this.value;  
        } 
      }); 
      return serializeObj; 
    }; 
  })(jQuery);

这里,我将多选的值封装为一个数值来进行处理。如果大家使用的时候需要将多选的值封装为“,"连接的字符串或者其他形式,请自行修改相应代码。
 
测试如下:
表单:
 

< form id = "myForm" action = "#" >
< input name = "name" />
< input name = "age" />
< select multiple = "multiple" name = "interest" size = "2" >
< option value = "interest1" > interest1 </ option >
< option value = "interest2" > interest2 </ option >
< option value = "interest3" > interest3 </ option >
< option value = "interest4" > interest4 </ option >
</ select >
< input type = "checkbox" name = "vehicle" value = "Bike" /> I have a bike
< input type = "checkbox" name = "vehicle" value = "Car" /> I have a car
< input type = "submit" />
</ form >

<form id="myForm" action="#"> 
  <input name="name"/> 
  <input name="age"/> 
  <select multiple="multiple" name="interest" size="2"> 
    <option value ="interest1">interest1</option> 
    <option value ="interest2">interest2</option> 
    <option value="interest3">interest3</option> 
    <option value="interest4">interest4</option> 
  </select> 
  <input type="checkbox" name="vehicle" value="Bike" /> I have a bike 
  <input type="checkbox" name="vehicle" value="Car" /> I have a car 
  <input type="submit"/> 
</form>

测试结果:

{age: "aa",interest: ["interest2", "interest4"],name: "dd",vehicle:["Bike","Car"]}

处理序列化时的空格问题

jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能;但是实际使用中有时会出现如下问题:

例如

<input name="content" value="ddd 567"/>

在执行 serialize()方法后,得到的却是  ddd+567这样的字符串;即jquery的序列化方法对空格进行了转义,转换成了 + 号。

解决方法

由于serialize()方法对真正的“+”号转义的是 %2B,所以可以对serialize()后的结果进行符号替换。

例如

<input name="content" value="ddd + 567 + 987"/>

<script>

var a= $('$frm1').serialize(); //序列化,默认会调用encodeURIComponent()进行编码
alert(a); // content=ddd+++567+++987
var b = a.replace(/\\+/g," ");  // g表示对整个字符串中符合条件的都进行替换
b = decodeURIComponent(b); //对serialize后的内容进行解码
alert(b); // content=ddd + 567 + 987

</script>
Javascript 相关文章推荐
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
jQuery插件之validation插件
Mar 29 jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 #Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 #Javascript
jquery判断密码强度的验证代码
Apr 22 #Javascript
jquery实现邮箱自动填充提示功能
Nov 17 #Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 #Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 #Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 #Javascript
You might like
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
新手学python应该下哪个版本
2020/06/11 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
写给老师的表扬信
2014/01/21 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
小学清明节活动总结
2014/07/04 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
护理实习生带教计划
2015/01/16 职场文书
邀请函格式范文
2015/02/02 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android