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 事件系统
Jul 22 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
利用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 函数语法介绍一
2009/06/14 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
大学自我鉴定
2013/12/20 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python