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的两个ListBox子项互相调整的实现代码
May 07 Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
很棒的Bootstrap选项卡切换效果
Jul 01 Javascript
JS出现失效的情况总结
Jan 20 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php、java、android、ios通用的3des方法(推荐)
2016/09/09 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
tensorflow转换ckpt为savermodel模型的实现
2020/05/25 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
2014全国两会学习心得体会2000字
2014/03/10 职场文书
维稳工作承诺书
2015/01/20 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
法制工作总结2015
2015/07/23 职场文书
2019各种保证书范文
2019/06/24 职场文书