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数字数组去重复项的实现代码
Dec 30 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 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中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP中比较时间大小实例
2014/08/21 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Django的CVB实例详解
2020/02/10 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
住房公积金接收函
2014/01/09 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
银行爱岗敬业演讲稿
2014/05/05 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
停课通知书
2015/04/24 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers