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 仿关机效果的图片层
Dec 26 Javascript
JS.getTextContent(element,preformatted)使用介绍
Sep 21 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php简单的会话类代码
2011/08/08 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
jQuery获取随机颜色的实例代码
2018/05/21 jQuery
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
Python网络编程 Python套接字编程
2017/09/13 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
学生感冒英文请假条
2014/02/04 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
高中生操行评语
2014/04/25 职场文书
重点工程汇报材料
2014/08/27 职场文书
教师节学生演讲稿
2014/09/03 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
婚礼新人答谢词
2015/01/04 职场文书
合作意向书范本
2019/04/17 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python