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 相关文章推荐
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
实现vuex原理的示例
Oct 21 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python 深入理解yield
2008/09/06 Python
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python实现电脑自动关机
2018/06/20 Python
Python异常处理知识点总结
2019/02/18 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
工程管理专业毕业生自荐信
2014/01/24 职场文书
共产党员公开承诺书
2014/03/25 职场文书
说明书怎么写
2014/05/06 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
英文版辞职信
2015/02/28 职场文书
学校教学工作总结2015
2015/05/19 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2016年元旦致辞
2015/08/01 职场文书
普希金诗歌赏析(6首)
2019/08/22 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis