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


Posted in Javascript onNovember 29, 2016

验证表单的时候经常需要获取表单中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对象的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
JS中判断null的方法分析
Nov 21 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 #Javascript
jQuery序列化表单成对象的简单实现
Nov 29 #Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 #Javascript
JS访问DOM节点方法详解
Nov 29 #Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 #Javascript
浅谈js函数的多种定义方法与区别
Nov 29 #Javascript
原生JS简单实现ajax的方法示例
Nov 29 #Javascript
You might like
php Undefined index的问题
2009/06/01 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
Python语言描述最大连续子序列和
2017/12/05 Python
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
python代码实现图书管理系统
2020/11/30 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
后勤人员自我鉴定
2013/10/20 职场文书
采购助理岗位职责
2014/02/16 职场文书
党支部承诺书范文
2014/03/28 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Golang数据类型和相互转换
2022/04/12 Golang