一、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对象的序列化详解的更多相关文章

  1. jquery对象中 “冒号” 详解

      冒号  可以理解为 “匹配” 或 “选取”的意思.   $(":button") 表示匹配所有的按钮.$("input:checked")表示匹配所有选中的 ...

  2. Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解

    Jquery遍历筛选数组的几种方法和遍历解析json对象|Map()方法详解 一.Jquery遍历筛选数组 1.jquery grep()筛选遍历数组 $().ready( function(){ v ...

  3. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  4. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  5. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  6. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

  7. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  8. jQuery Event.which 属性详解

    jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对 ...

  9. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

随机推荐

  1. 【lua】可变长参数

    lua可变长参数 在lua中可以使用...表示可变长参数,在函数内通过表访问可变参数 function rest(...) -- 把可变参数放在表类 local args = { ... } prin ...

  2. hdu 5117 数学公式展开 + dp

    题目大意:有n个灯泡,m个按钮,(1 <= n, m <= 50),每个按钮和ki 个灯泡相关, 按下后,转换这些灯泡的状态,问你所有2^m的按下按钮的 组合中亮着的灯泡的数量的三次方的和 ...

  3. Ubuntu上开启Apache Rewrite功能的方法

    Ubuntu上开启Apache Rewrite功能的方法 本文介绍ubuntn系统中开启apache的urlrewrite功能的方法. 在Windows上开启Apache的urlRewrite非常简单 ...

  4. 最小生成树算法详解(prim+kruskal)

    最小生成树概念: 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边. 最小生成树可以用kruskal(克鲁斯卡尔)算法或prim(普里 ...

  5. windows 10 的开始菜单里面图标右击弹不出选项菜单了

    组策略的问题 win + r => gpedit.msc 计算机配置->管理模板>“开始”菜单和任务栏>在“开始”菜单中禁用上下文菜单  改为“已禁用”

  6. python打印所有汉字

    n=0 for ch in xrange(0x4e00, 0x9fa6): print unichr(ch), n = n+1 if(n%50==0): print '\n' print n

  7. npm 安装或更新模块失败的解决办法

    头一次关注npm,在刚刚安装的机子上使用更新指令却报错,我还以为是SHA512有什么问题,后来发现是因为一些网络原因,所以,如果出现错误,务必修改默认配置为国内镜像,但是在publish之前,记得要改 ...

  8. 【SQL】oralce中使用group by和case when按照条件求和

    假设我们有一个Salary 薪水表.这个表的字段分别为:id, name, salary, level  在这个表中,每个人有不同的级别(level).我们要根据不同的级别统计相同级别员工的薪水总和. ...

  9. Sqli-labs less 2

    Less-2 将'(单引号)添加到数字中. 我们又得到了一个Mysql返回的错误,提示我们语法错误. You have an error in your SQL syntax; check the m ...

  10. Sqli-labs less 4

    Less-4 我们使用?id=1" 注入代码后,我们得到像这样的一个错误: You have an error in your SQL syntax; check the manual th ...