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=60;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: avalue: 1},{name: bvalue: 2},{name: cvalue: 3},{name: dvalue: 4},{name: evalue: 5} ]
总结:
1、param(),数组或对象序列化表示
2、serialize(),序列化表单(成功元素、必须有name属性)
3、serializeArray(),序列化表单来创建对象数组,返回JSON对象
jQuery对象的序列化详解相关推荐
- 请求对象触碰jQuery:AJAX异步详解
最近一直在研究请求对象之类的问题,现在正好有机会和大家讨论一下. 传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous Java ...
- 【转】4.1触碰jQuery:AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
- jQuery.extend 函数使用详解
jQuery.extend 函数使用详解 一.总结 一句话总结: jquery $.extend的作用就是:用于将一个或多个对象的内容合并到目标对象:$.extend( target [, objec ...
- jQuery 表单验证插件,jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
- 最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解 学习可参考:http://www.g ...
- 浏览器对象存储数据详解
浏览器对象存储数据详解 前言 随着需求的发展,浏览器的功能正变的越来越强大,在本地存储数据可以极大的方便人们进行各种操作,如localStroage/sessionStroage等,下面我就记录在项目 ...
- 【C++】C++对象模型:对象内存布局详解(C#实例)
C++对象模型:对象内存布局详解 0.前言 C++对象的内存布局.虚表指针.虚基类指针解的探讨,参考. 1.何为C++对象模型? 引用<深度探索C++对象模型>这本书中的话: 有两个概念可 ...
- jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
最新文章
- 常见非关系型数据库(NoSQL)推荐介绍
- OpenCV 中值滤波
- centos6.2部署jdk+tomcat+mysql总结
- 在集群服务器进行自定义数据集训练记录过程 TensorBoard logging requires TensorBoard with Python summary writer installed.
- 笨办法学 Python · 续 练习 18:性能测量
- java 运行时修改类_在运行时修改类定义的注释字符串参数
- html点击发送qq邮箱_qq邮箱怎么发送文件夹
- python输入时间_一文搞懂python日期时间处理
- 数学分析:函数序列及其一致收敛性
- python 移动平均法_移动平均法详解
- python分段函数图像画法_特殊分段函数的图像画法
- Python字符串逆序输出
- 基于matlab的天线方向图,基于matlab的天线方向图
- 淘宝网热浪引擎平台资费规则
- Java工程师(面试)
- 学人工智能需要什么基础?
- vue虚拟DOM原理
- cmw测试ble_如何测试CC2640的BLE射频指标(一)
- 水位传感器(Water Sensor)原理图
- oracle 查看scott权限,Oracle创建表空间、创建用户以及授权、查看权限 、scott解锁...