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 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
react PropTypes校验传递的值操作示例
Apr 28 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php开启openssl的方法
2014/05/15 PHP
浅谈PHP封装CURL
2019/03/06 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python的UTC时间转换讲解
2019/02/26 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
Python实现报警信息实时发送至邮箱功能(实例代码)
2019/11/11 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
Python模块zipfile原理及使用方法详解
2020/08/04 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
几个数据库方面的面试题
2016/07/01 面试题
初三开学计划书
2014/04/27 职场文书
个人承诺书怎么写
2014/05/24 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
与美同行演讲稿
2014/09/13 职场文书
上班迟到检讨书
2014/09/15 职场文书
标准单位租车协议书
2014/09/23 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python