jQuery对象的序列化详解
一、param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
语法:
jQuery.param(object,traditional)
object要进行序列化的数组或对象
traditional规定是否使用传统的方式浅层进行序列化(参数序列化)。
$.ajax()设置 的 traditional参数实际上是设置 jQuery.param 的traditional 参数,默认为false,当设置为true后,会导致多层次的对象序列化为[object object](浅序列化)
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
personObj=new Object();
personObj.firstname="Bill";
personObj.lastname="Gates";
personObj.age=;
personObj.eyecolor="blue";
$("button").click(function(){
$("div").text($.param(personObj));
});
});
</script>
</head>
<body>
<button>序列化对象</button>
<div></div>
</body>
</html>
//输出结果:firstname=Bill&lastname=Gates&age=60&eyecolor=blue
二、serialize() 方法通过序列化表单值,创建 URL 编码文本字符串
您可以选择一个或多个表单元素(比如 input 或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些。
注意:1、只会将“成功的控件”序列化为字符串。(即不能被禁用)
2、如果不使用按钮来提交表单,则不对提交按钮的值序列化。
3、如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").text($("form").serialize());
});
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form> <button>序列化表单值</button>
<div></div>
</body>
</html>

三、serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。
您可以选择一个或多个表单元素(比如 input 或 textarea),或者 form 元素本身。
语法:$(selector).serializeArray()
详细说明:
serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。
注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。
返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:
[
{name: 'firstname', value: 'Hello'},
{name: 'lastname', value: 'World'},
{name: 'alias'}, // 值为空
]
.serializeArray() 方法使用了 W3C 关于 successful controls(有效控件) 的标准来检测哪些元素应当包括在内。特别说明:元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。
该方法可以对已选择单独表单元素的对象进行操作,比如 <input>, <textarea>, 和 <select>。不过,更方便的方法是,直接选择 <form> 标签自身来进行序列化操作。
$("form").submit(function() {
console.log($(this).serializeArray());
return false;
});
//上面的代码产生下面的数据结构(假设浏览器支持 console.log):
[
{
name: a
value:
},
{
name: b
value:
},
{
name: c
value:
},
{
name: d
value:
},
{
name: e
value:
}
]
总结:
1、param(),数组或对象序列化表示
2、serialize(),序列化表单(成功元素、必须有name属性)
3、serializeArray(),序列化表单来创建对象数组,返回JSON对象
jQuery对象的序列化详解的更多相关文章
- jquery对象中 “冒号” 详解
冒号 可以理解为 “匹配” 或 “选取”的意思. $(":button") 表示匹配所有的按钮.$("input:checked")表示匹配所有选中的 ...
- Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解
Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- jQuery Event.which 属性详解
jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
随机推荐
- poj 2452(RMQ+二分查找)
题目链接: http://poj.org/problem?id=2452 题意:在区间[1,n]上找到满足 a[i]<a[k]<a[j] (i<=k<=j) 的最大子区间 (j ...
- 【JBPM4】完成任务
示例代码: ProcessEngine processEngine = Configuration.getProcessEngine(); TaskService taskService = proc ...
- Unable to find a qt build, to solve this problem specify a qt build
可能路径设置不对,比如大小写错误导致找不到qmake编译器,点击VS工具栏的QT菜单,选择options,指定qt Build所在的路径(qt安装路径),然后点击ok. 这是修改过默认安装路径的
- 洛谷 P3128 [USACO15DEC]最大流Max Flow-树上差分(点权/点覆盖)(模板题)
因为徐州现场赛的G是树上差分+组合数学,但是比赛的时候没有写出来(自闭),背锅. 会差分数组但是不会树上差分,然后就学了一下. 看了一些东西之后,对树上差分写一点个人的理解: 首先要知道在树上,两点之 ...
- 洛谷 P1352 没有上司的舞会【树形DP/邻接链表+链式前向星】
题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...
- Envious Exponents
问题 E: Envious Exponents 时间限制: 1 Sec 内存限制: 128 MB提交: 321 解决: 53[提交] [状态] [讨论版] [命题人:] 题目描述 Alice an ...
- Kali Linux WPScan更新到2.9.3
Kali Linux WPScan更新到2.9.3 WPScan是Kali Linux内置的一款Web漏洞扫描工具,专门扫描WordPress模版构建的网站.该工具最近更新到2.9.3.在新版本中 ...
- 【20181019T3】比特战争【最小生成树思想】
题面 [错解] Hmm不可做啊 要不按b排个序? 然后并查集瞎搞,刷刷刷过了样例 然后大样例大了几万倍 出了组小数据,Successful Hack 弃疗 水过10分 [正解] 用占领的边将顶点连起来 ...
- [BZOJ 2427] 软件安装
Link: BZOJ 2427 传送门 Solution: 只看样例的话会以为是裸的树形$dp$…… 但实际上题目并没有说明恰好仅有一个物品没有依赖项 因此原图可能由是由多棵树与多个图组成的 先跑一遍 ...
- [CODECHEF]RIN
题意:一个人要在$m$个学期上$n$节课,在第$j$学期上$i$课有$X_{i,j}$的收益,有些课$B_i$有前置课程$A_i$,问最大得分 这个题我都做不出来还去看题解...我退役吧== 考虑每种 ...