将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实现跳转菜单的具体方法
Jul 05 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
基于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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
Javascript的this用法
2017/01/16 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
记录Django开发心得
2014/07/16 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
优秀演讲稿范文
2013/12/29 职场文书
机电一体化求职信
2014/03/10 职场文书
经理岗位职责范本
2015/04/15 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
python实现Nao机器人的单目测距
2021/09/04 Python