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. Quartz Scheduler(2.2.1) - Working with SchedulerListeners

    SchedulerListeners SchedulerListeners are much like TriggerListeners and JobListeners, except they r ...

  2. Android开发中的PhoneGap基本使用

    一.关于PhoneGap Phonegap是一款开源的开发框架,旨在让开发者使用HTML.Javascript.CSS等Web APIs开发跨平台的移动应用程序.   二.PhoneGap在Andro ...

  3. cocos2dx-lua class语法糖要注意了

    cocos2dx-lua function.lua 定义了class方法,让lua实现继承像传统语言一样漂亮和方便 看定义 function class(classname, super) local ...

  4. Java垃圾回收介绍(译)

    在Java中,对象内存空间的分配与回收是由JVM中的垃圾回收进程自动完成的.与C语言不同的是,在Java中开发者不需要专门为垃圾回收写代码.这是使Java流行的众多特征之一,也帮助了程序员写出了更好的 ...

  5. Js 赋值传值和引用传址

    赋值传值和引用传址 在JavaScript中基本数据类型都是赋值传值,复合数据类型都是引用传址(传地址) 基本数据类型的变量名和数据是直接存在"快速内存"(栈内存)中,而复合数据类 ...

  6. 【leetcode】354. Russian Doll Envelopes

    题目描述: You have a number of envelopes with widths and heights given as a pair of integers (w, h). One ...

  7. java如何调用webservice接口

    java调用WebService可以直接使用Apache提供的axis.jar自己编写代码,或者利用Eclipse自动生成WebService Client代码,利用其中的Proxy类进行调用.理论上 ...

  8. ios版弹珠游戏源码

    这个是我们比较喜欢玩的一直小游戏的,ios版弹珠游戏源码,该游戏源码来着IOS教程网其他网友提供上传的,大家可以了解一下吧. nore_js_op>     <ignore_js_op&g ...

  9. DEDECMS中,channelartlist标签

    当前频道的下级栏目的内容列表 dede:channelartlist 标签: {dede:channelartlist row=6} <dl> <dt><a href=' ...

  10. 用CSS3写的小案例-图片缩放隐藏内容显示

    思路分析 (1).搭建界面 (2).鼠标移到图片的时候,放大显示 (3).鼠标移入到当前的li标签里面找到后面的div让其显示出来 <!DOCTYPE html> <html lan ...