jquery.serialize() 函数语法及简单实例


Posted in Javascript onJuly 08, 2016

jQuery - serialize() 方法

W3School给出的定义与用法:

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。

您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

------------------------- 分割线 ----------------------

serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串。

serialize()函数常用于将表单内容序列化,以便用于AJAX提交。

该函数主要根据用于提交的有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。

该函数不会序列化不需要提交的表单控件,这和常规的表单提交行为是一致的。例如:不在<form>标签内的表单控件不会被提交、没有name属性的表单控件不会被提交、带有disabled属性的表单控件不会被提交、没有被选中的表单控件不会被提交。

与常规表单提交不一样的是:常规表单一般会提交带有name的按钮控件,而serialize()函数不会序列化带有name的按钮控件。
 

返回值

serialize()函数的返回值为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。

示例&说明

请参考下面这段初始HTML代码:

<form name="myForm" action="http://www.365mini.com" method="post">
  <input name="uid" type="hidden" value="1" />
  <input name="username" type="text" value="张三" />
  <input name="password" type="text" value="123456" />
  <select name="grade" id="grade">
    <option value="1">一年级</option>
    <option value="2">二年级</option>
    <option value="3" selected="selected">三年级</option>
    <option value="4">四年级</option>
    <option value="5">五年级</option>
    <option value="6">六年级</option>
  </select>
  <input name="sex" type="radio" checked="checked" value="1" />男
  <input name="sex" type="radio" value="0" />女
  <input name="hobby" type="checkbox" checked="checked" value="1" />游泳
  <input name="hobby" type="checkbox" checked="checked" value="2" />跑步
  <input name="hobby" type="checkbox" value="3" />羽毛球
  <input name="btn" id="btn" type="button" value="点击" />
</form>

对<form>元素进行序列化可以直接序列化其内部的所有表单元素。

// 序列化<form>内的所有表单元素
// 序列化后的结果:uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
alert( $("form").serialize() );

我们也可以直接对部分表单元素进行序列化。

// 序列化所有的text、select、checkbox表单元素
// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
alert( $(":text, select, :checkbox").serialize() );

serialize()函数通常用于将表单内容序列化,以便通过AJAX方式提交。

$("#btn").click( function(){

  // 将当前表单内容以POST请求的AJAX方式提交到"http://www.365mini.com"
  $.post( "http://www.365mini.com", $("form").serialize(), function( data, textStatus, jqXHR ){
    alert( "AJAX提交成功!" );    
  } );
    
} );

以上这篇jquery.serialize() 函数语法及简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
jQuery添加options点击事件并传值实例代码
May 18 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
Vue路由管理器Vue-router的使用方法详解
Feb 05 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 #Javascript
Augularjs-起步详解
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 #Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 #Javascript
Angularjs---项目搭建图文教程
Jul 08 #Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 #Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php实现网站插件机制的方法
2009/11/10 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php实现的日历程序
2015/06/18 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python多进程分块读取超大文件的方法
2016/04/13 Python
python正则表达式面试题解答
2020/04/28 Python
在python中画正态分布图像的实例
2019/07/08 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python制作抽奖程序代码详解
2021/01/15 Python
事业单位个人应聘自荐信
2013/09/21 职场文书
师范应届生语文教师求职信
2013/10/29 职场文书
毕业自荐书
2013/12/09 职场文书
优秀教师主要事迹
2014/02/01 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
高中生评语大全
2014/04/25 职场文书
四风查摆剖析材料
2014/10/10 职场文书
2015年父亲节寄语
2015/03/23 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
幼儿园教师岗位职责
2015/04/02 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript