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面向对象之体会[总结]
Nov 13 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
基于BootStrap的前端分页带省略号和上下页效果
May 18 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 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 模拟get_headers函数的代码示例
2013/04/27 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
pycharm运行scrapy过程图解
2019/11/22 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
幼儿园教师演讲稿
2014/05/06 职场文书
计算机专业自荐信
2014/05/24 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
丽江古城导游词
2015/02/03 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
如何书写授权委托书?
2019/06/25 职场文书