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 Konami Code 实现代码
Jul 29 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
js实现select跳转功能代码
Oct 22 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
简单了解常用的JavaScript 库
Jul 16 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
关于php mvc开发模式的感想
2011/06/28 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
vue-quill-editor的使用及个性化定制操作
2020/08/04 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python continue继续循环用法总结
2018/06/10 Python
对python多线程与global变量详解
2018/11/09 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
Python魔术方法专题
2020/06/19 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
门卫岗位职责说明书
2014/08/18 职场文书
社区宣传标语口号
2015/12/26 职场文书
2019年入党思想汇报
2019/03/25 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
python 判断文件或文件夹是否存在
2022/03/18 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers