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 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
jquery 常用操作方法
Jan 28 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
angularJS 入门基础
2015/02/09 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
javascript事件模型介绍
2016/05/31 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
中专生职业生涯规划书范文
2013/12/29 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
职工小家建设活动方案
2014/08/25 职场文书
员工年终自我评价
2014/09/14 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书