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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
基于javascript实现判断移动终端浏览器版本信息
Dec 09 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
微信小程序的部署方法步骤
Sep 04 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
vue实现表格合并功能
Dec 01 Vue.js
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获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
jQuery select控制插件
2009/08/17 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
2018/04/09 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
python下载文件记录黑名单的实现代码
2017/10/24 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python super()方法原理详解
2020/03/31 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
房屋改造计划书
2014/01/10 职场文书
工商管理自荐书
2014/07/06 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
安全责任书
2015/01/29 职场文书
赵氏孤儿观后感
2015/06/09 职场文书
公司周年庆典致辞
2015/07/30 职场文书