jquery.serialize() 函数语法及简单实例
jQuery - serialize() 方法
W3School给出的定义与用法：
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
语法
$(selector).serialize()详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
------------------------- 分割线 ----------------------
serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。
serialize()函数常用于将表单内容序列化，以便用于AJAX提交。
该函数主要根据用于提交的有效表单控件的name和value，将它们拼接为一个可直接用于表单提交的文本字符串，该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。
该函数不会序列化不需要提交的表单控件，这和常规的表单提交行为是一致的。例如：不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。
与常规表单提交不一样的是：常规表单一般会提交带有name的按钮控件，而serialize()函数不会序列化带有name的按钮控件。
返回值
serialize()函数的返回值为String类型，返回将表单元素编码后的可用于表单提交的文本字符串。
示例&说明
请参考下面这段初始HTML代码：
<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>元素进行序列化可以直接序列化其内部的所有表单元素。
// 序列化<form>内的所有表单元素
// 序列化后的结果：uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );
我们也可以直接对部分表单元素进行序列化。
// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果：username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );
serialize()函数通常用于将表单内容序列化，以便通过AJAX方式提交。
$("#btn").click( function(){
// 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
$.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
alert( "AJAX提交成功!" );
} );
} );
以上这篇jquery.serialize() 函数语法及简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
jQuery中图片展示插件highslide.js的简单dom
Highslide是一个非常美观的图片灯箱插件，下面这篇文章主要给大家介绍了关于jQuery中图片展示插件highslide.js的简单dom，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
利用jquery操作select下拉列表框的代码，需要的朋友可以参考 下，jquery操作select的相关文章会给你更多的惊喜。2010-06-06
这篇文章主要介绍了用图片替换checkbox原始样式并实现同样的功能 ，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-11-11
网站设计者往往会设计一些小的工具类（widgets）或者一些可复用的程序，从而使页面更楚楚动人，更吸引浏览者驻足。这里收集了20个常用Jquery工具类，这些小的工具可以帮助网站设计人员和站长非常容易地创建漂亮的站点。2010-01-01
两个select之间option的互相添加操作(jquery实现)
两个select,将其中一个select选中的选项添加到另一个select中,或者点击全部添加按钮将所有的option都添加过去.2009-11-11
jquery text,radio,checkbox,select操作实现代码
学习jquery的朋友看参考下，对form等文本框的一些控制实现代码。2009-07-07
这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下2016-02-02
使用jQuery.form.js/springmvc框架实现文件上传功能
这篇文章主要介绍了使用jQuery.form.js/springmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果，具体实例如下，感兴趣的朋友可以学习下2013-05-05
本文为大家介绍下html伪弹出框的实现，感兴趣的朋友可以了解下2013-09-09
最新评论