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 相关文章推荐
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 Javascript
JS数组去重详情
Nov 07 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
PHP脚本的10个技巧(6)
2006/10/09 PHP
php中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php 魔术方法详解
2014/11/11 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
基于PHP实现用户在线状态检测
2020/11/10 PHP
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
python实现ID3决策树算法
2018/08/29 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python实现人工蜂群算法
2020/09/18 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
应届生简历自我评价
2015/03/11 职场文书
法院执行局工作总结
2015/08/11 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
python实现简单石头剪刀布游戏
2021/10/24 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android