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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
JavaScript RegExp 对象用法详解
Sep 24 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP中用hash实现的数组
2011/07/17 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
jQuery之选择组件的深入解析
2013/06/19 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
python利用Guetzli批量压缩图片
2017/03/23 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python实现学员管理系统
2019/02/26 Python
学python安装的软件总结
2019/10/12 Python
Python几种常见算法汇总
2020/06/02 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python Zmail模块简介与使用示例
2020/12/19 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014年质检工作总结
2014/11/26 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Android中View.post和Handler.post的关系
2022/06/05 Java/Android