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()方法的第二个参数的使用方法，十分的简单，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了TinyMCE汉化及本地上传图片功能实例详解的相关资料,由于我们下载下拉的是英文版，需要先汉化，比较简单，需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery 3.0中存在问题及解决办法的相关资料,需要的朋友可以参考下2016-07-07
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
本篇文章主要介绍了easyUI的doCellTip 就是鼠标放到单元格上有个提示的功能，对于Javascript教程感兴趣的同学可以参考一下2016-08-08
据jQuery官方博客5月3日的最新消息，jQuery 1.6 正式版已经可以下载使用。jQuery 1.6 版本包括了对属性(Attribute)模型的重要重写，还有诸多性能优化。借此机会感谢jQuery开发团队和jQuery错误分类团队的成员。2011-05-05
这篇文章主要介绍了jQuery获取table行数并输出单元格内容的实现方法,涉及jQuery针对表格与页面元素的动态操作技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery使用JSONP实现跨域获取数据的三种方法,结合实例形式对比分析了jsonp跨域获取数据的3种常用操作技巧,需要的朋友可以参考下2017-05-05
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
本文为大家想你想介绍下jquery实现页面动态数据的滚动效果。似乎只有通过div-ul-li标签嵌套的方式才能实现表格多行多列的滚动效果2013-07-07
这篇文章主要介绍了jquery获取当前元素索引值用法,实例分析了jQuery获取当前元素索引在创建图片轮播效果中的使用技巧,需要的朋友可以参考下2015-06-06
本文主要是给大家分享了jQuery UI bootstrap的自定义风格，以及自定义的方法，非常的实用，有需要的小伙伴千万不要错过2014-11-11
最新评论