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实现强制重定向至HTTPS页面
Jun 10 Javascript
javascript html5实现表单验证
Mar 01 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
Vue组件简易模拟实现购物车
Dec 21 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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
Python 错误和异常小结
2013/10/09 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python requests库用法实例详解
2018/08/14 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
黄河象教学反思
2014/02/10 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
中小企业员工手册范本
2015/05/14 职场文书
师范生教育见习总结
2015/06/23 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
创业计划书之酒店
2019/08/30 职场文书
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL