jQuery将表单序列化成一个Object对象的实例

更新时间：2016年11月29日 09:31:35 投稿：jingxian

下面小编就为大家带来一篇jQuery将表单序列化成一个Object对象的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

验证表单的时候经常需要获取表单中name='***'的元素的值，然后加以判断。jQuery中提供了jQuery.serizlizeArray来将表单序列化成一个数组。尽管如此，数组还是不方便我们操作，我需要讲表单序列化成一个对象。这样更方便于我们操作。

下面是代码：

/** 
 * @author gaohuia 
 */ 
 
(function($){ 
  $.fn.extend({ 
    serializeObject:function(){ 
      if(this.length>1){ 
        return false; 
      } 
      var arr=this.serializeArray(); 
      var obj=new Object; 
      $.each(arr,function(k,v){ 
        obj[v.name]=v.value; 
      }); 
      return obj; 
    } 
  }); 
})(jQuery); 
/**
 * @author gaohuia
 */
 
(function($){
    $.fn.extend({
       serializeObject:function(){
           if(this.length>1){
              return false;
           }
           var arr=this.serializeArray();
           var obj=new Object;
           $.each(arr,function(k,v){
              obj[v.name]=v.value;
           });
           return obj;
       }
    });
})(jQuery);

测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jQuery.formtool.js"></script> 
<title>无标题文档</title> 
<script language="javascript"> 
$(function(){ 
   
  $(":button").click(function(){ 
    var test=$("form").serializeObject(); 
    alert(test.id);    
  }); 
}); 
 
</script> 
</head> 
<body> 
<form action="" method="get"><input name="id" type="hidden" value="110" /> 
<input name="test" type="text" /> 
<input name="" type="button" /> 
</form> 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.formtool.js"></script>
<title>无标题文档</title>
<script language="javascript">
$(function(){
   
    $(":button").click(function(){
       var test=$("form").serializeObject();
       alert(test.id);     
    });
});
 
</script>
</head>
<body>
<form action="" method="get"><input name="id" type="hidden" value="110" />
<input name="test" type="text" />
<input name="" type="button" />
</form>
</body>
</html>

以上这篇jQuery将表单序列化成一个Object对象的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

jquery实现心算练习代码
实现代码的过程中，有两个问题很棘手，一个是开始按钮连续单击，计时时间会迅速加快；二是如何判定玩家单击哪个按钮。
2010-12-12
EasyUI Pagination 分页的两种做法小结
这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下
2016-07-07
jQuery .attr()和.removeAttr()方法操作元素属性示例
本文为大家详细介绍下如何使用jQuery的.attr()和.removeAttr()方法读取，添加，修改，删除元素的属性，不会的朋友可以参考下哈，希望对大家有所帮助
2013-07-07
jQuery实现简易计算器功能
这篇文章主要为大家详细介绍了jQuery实现简易计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
jQuery的一些特性和用法整理小结
下面简单介绍一下jQuery的一些特性和用法，对于学习jquery的朋友有不少帮助。
2010-01-01
jquery实现拖拽调整Div大小
这里给大家分享的是一段自己编写的使用jQuery实现拽调整Div层大小的代码，非常实用，推荐给有需要的小伙伴们。
2015-01-01
jQuery实现手风琴效果（蒙版）
这篇文章主要介绍了jQuery实现手风琴效果，附带蒙版特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
浅谈DOCTYPE对$(window).height()取值的影响
下面小编就为大家带来一篇浅谈DOCTYPE对$(window).height()取值的影响。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
jQuery之动画效果大全
本篇文章主要介绍了jQuery之动画效果，详细的介绍了各种动画特效的用法，有需要的可以了解一下。
2016-11-11
jQuery Flash/MP3/Video多媒体插件
jQuery Flash/MP3/Video多媒体插件,主要是用来加载flash或mp3等网络媒体文件。
2010-01-01