• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery将表单序列化成一个Object对象的实例

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

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery,表单序列化等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery选择器的工作原理和优化分析
  • jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
  • jQuery插件zTree实现清空选中第一个节点所有子节点的方法
  • jquery 批量上传图片实现代码
  • 基于jquery点击自以外任意处,关闭自身的代码
  • 在jQuery中 关于json空对象筛选替换
  • 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
  • jquery实现多屏多图焦点图切换特效的方法
  • Jquery针对tr td的一些实用操作方法(必看篇)
  • TinyMCE汉化及本地上传图片功能实例详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery中outerWidth()方法用法实例
    • 使用jquery判断一个元素是否含有一个指定的类(class)实例
    • jQuery自定义滚动条完整实例
    • JQuery 实现的页面滚动时浮动窗口控件
    • jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
    • jQuery filter函数使用方法
    • JQuery使用index方法获取Jquery对象数组下标的方法
    • jQuery获取table下某一行某一列的值实现代码
    • 简短几句jquery代码的实现一个图片向上滚动切换
    • jquery mobile移动端幻灯片滑动切换效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有