serializeArray()函数用于序列化一组表单元素,将表单内容编码为一个JavaScript数组

serializeArray()函数常用于将表单内容序列化为JSON对象,以便于被编码为JSON格式的字符串。

该函数会将可用于提交的每个表单控件封装成一个Object对象,该对象有name和value属性,对应该表单控件的name和value属性。然后将这些Object对象封装为一个数组并返回。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serializeArray()函数不会序列化带有name的按钮控件。更多详情请点击这里

<form name="myForm" action="http://www.365mini.com" method="post">
<input name="uid" type="hidden" value="1" />
<input name="username" type="text" value="张三" />
<input name="password" type="text" value="123456" />
<select name="grade" id="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3" selected="selected">三年级</option>
<option value="4">四年级</option>
<option value="5">五年级</option>
<option value="6">六年级</option>
</select>
<input name="sex" type="radio" checked="checked" value="1" />男
<input name="sex" type="radio" value="0" />女
<input name="hobby" type="checkbox" checked="checked" value="1" />游泳
<input name="hobby" type="checkbox" checked="checked" value="2" />跑步
<input name="hobby" type="checkbox" value="3" />羽毛球
<input name="btn" id="btn" type="button" value="点击" />
</form>

  对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

var formArray = $("form").serializeArray();
/* 以下是序列化后的结果数组formArray的内容:
[
{ name: "uid", value: "1" },
{ name: "username", value: "张三" },
{ name: "password", value: "123456" },
{ name: "grade", value: "3" },
{ name: "sex", value: "1" },
{ name: "hobby", value: "1" },
{ name: "hobby", value: "2" }
];
*/

  我们也可以直接对部分表单元素进行序列化。

var result = $(":text, select, :checkbox").serializeArray();
/* 以下是序列化后的结果数组result的内容:
[
{ name: "username", value: "张三" },
{ name: "password", value: "123456" },
{ name: "grade", value: "3" },
{ name: "hobby", value: "1" },
{ name: "hobby", value: "2" }
];
*/

  

jQuery.serializeArray() 函数详解的更多相关文章

  1. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  2. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  3. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

  4. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  5. jQuery.hasClass() 函数详解

    jQuery.hasClass() 函数详解 hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名. 该函数属于jQuery对象(实例). 语法 JavaScrip ...

  6. jQuery.ajax() 函数详解

    jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. ...

  7. jQuery.makeArray() 函数详解

    jQuery.makeArray()函数用于将一个类数组对象转换为真正的数组对象. 所谓"类数组对象"就是一个常规的Object对象,但它和数组对象非常相似:具备length属性, ...

  8. jQuery.isEmptyObject() 函数详解

    所谓"空对象",即不包括任何可枚举(自定义)的属性.简而言之,就是该对象没有属性可以通过for...in迭代. 该函数属于全局jQuery对象. 语法 jQuery 1.4 新增该 ...

  9. jQuery.proxy() 函数详解

    jQuery.proxy()函数用于改变函数的上下文. 你可以将指定函数传入该函数,该函数将返回一个新的函数,其执行代码不变,但函数内部的上下文(this)已经被更改为指定值. 该函数属于全局的jQu ...

随机推荐

  1. ASP.NET运行原理

    1,ASP.NET运行原理: 客户端向服务器发出请求 → 服务器处理请求→ 处理好的数据以报文发给浏览器 → 浏览器显示请求结果 2,Chrome浏览器,查看请求过程:F12打开浏览器的调试窗口: 3 ...

  2. Java Concurrency - ReadWriteLock & ReentrantReadWriteLock

    锁所提供的最重要的改进之一就是 ReadWriteLock 接口和它的实现类 ReentrantReadWriteLock.这个类提供两把锁,一把用于读操作和一把用于写操作.同一时间可以有多个线程执行 ...

  3. Quartz Scheduler(2.2.1) - Working with JobStores

    About Job Stores JobStores are responsible for keeping track of all the work data you give to the sc ...

  4. django 学习-4 模板标签

    1.第一个标签是 if 标签 vim  learn/home.html <!DOCTYPE html><html><head>        <title&g ...

  5. hive 未初始化元数据库报错

    启动hive-metastore和hive-server2 用beeline连接hive报错 [root@node04 hive]# beeline Beeline version 0.13.1-cd ...

  6. UVaLive 3708

    题意:周长为10000的圆上等距分布n个雕塑,求再加入m个雕塑后,为使所有雕塑等距分布所需移动原来n个雕塑的最小总距离. 分析:计算相对距离. #include<cstdio> #incl ...

  7. nginx上传文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. apache 设置禁止访问某些文件或目录

    [apache配置禁止访问]1. 禁止访问某些文件/目录增加Files选项来控制,比如要不允许访问 .inc 扩展名的文件,保护php类库:<Files ~ "\.inc$" ...

  9. c#winform,制作可编辑html编辑器

    大神勿喷,新手记笔记 材料 网上下载kindeditor,动手在写个htmldome,图中的e.html.然后全部扔到了bin/debug下面,(x86是要扔到bin/x86/debug) 中间bod ...

  10. js控制进度条到达100%跳转界面一

    进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...