jQuery-serialize()输出序列化form表单值的方法


Posted in Javascript onDecember 26, 2012

实例
输出序列化表单值的结果:

$("button").click(function(){ 
$("div").text($("form").serialize()); 
});

定义和用法
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

表单元素有几种类型

<form> 
<div><inputtype="text"name="a"value="1"id="a"/></div> 
<div><inputtype="text"name="b"value="2"id="b"/></div> 
<div><inputtype="hidden"name="c"value="3"id="c"/></div> 
<div> 
<textareaname="d"rows="8"cols="40">4</textarea> 
</div> 
<div><selectname="e"> 
<optionvalue="5"selected="selected">5</option> 
<optionvalue="6">6</option> 
<optionvalue="7">7</option> 
</select></div> 
<div> 
<inputtype="checkbox"name="f"value="8"id="f"/> 
</div> 
<div> 
<inputtype="submit"name="g"value="Submit"id="g"/> 
</div> 
</form> 
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些: 
$('form').submit(function(){ 
alert($(this).serialize()); 
returnfalse; 
});

输出标准的查询字符串
a=1&b=2&c=3&d=4&e=5
注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。
Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
jQuery事件用法详解
Oct 06 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
如何通过JS实现转码与解码
Feb 21 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 #Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 #Javascript
Javascript图像处理思路及实现代码
Dec 25 #Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 #Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 #Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 #Javascript
js优化针对IE6.0起作用(详细整理)
Dec 25 #Javascript
You might like
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php下载文件的代码示例
2012/06/29 PHP
基于empty函数的判断详解
2013/06/17 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python 中的int()函数怎么用
2017/10/17 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python简单实现插入排序实例代码
2020/12/16 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
建筑工地大门标语
2014/06/18 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
追悼词范文大全
2015/06/23 职场文书
党课主持词大全
2015/06/30 职场文书
学子宴致辞大全
2015/07/27 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript