编程 Javascript

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对象的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript DOM学习第四章 getElementByTagNames

Feb 19 Javascript

jQuery中height()方法用法实例

Dec 24 Javascript

JavaScript图片轮播代码分享

Jul 31 Javascript

JavaScript setTimeout使用闭包功能实现定时打印数值

Dec 18 Javascript

基于JavaScript实现TAB标签效果

Jan 12 Javascript

JavaScript中解决多浏览器兼容性23个问题的快速解决方法

May 19 Javascript

XMLHttpRequest Level 2 使用指南

Aug 26 Javascript

JS查找数组中重复元素的方法详解

Jun 14 Javascript

Vue入门之数据绑定(小结)

Jan 08 Javascript

php中and 和 &&出坑指南

Jul 13 Javascript

小程序实现搜索框功能

Mar 26 Javascript

VUE+Element实现增删改查的示例源码

Nov 23 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

flex(1) GNN(1) 选择器(1) #{}(1) flex-shrink(1) 图片模糊(1) 匹配文本(1) canvas(2) SQL注入(2) 代理(2)