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 相关文章推荐
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
javascript globalStorage类代码
2009/06/04 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
中止javascript执行的方法
2014/02/14 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
Python 专题四 文件基础知识
2017/03/20 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
详解Python yaml模块
2020/09/23 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
《曹刿论战》教学反思
2014/03/02 职场文书
小学生操行评语大全
2014/04/22 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
大四学生个人总结
2015/02/15 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android