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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
js动态创建标签示例代码
Jun 09 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 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
菜鸟修复电子管记
2021/03/02 无线电
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
Python contextlib模块使用示例
2015/02/18 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
Ajax和javascript的区别
2013/07/20 面试题
行政助理岗位职责范文
2013/12/03 职场文书
企业文化理念标语
2014/06/10 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
个人汇报材料范文
2014/12/30 职场文书
2015年底工作总结范文
2015/05/15 职场文书
花木兰观后感
2015/06/10 职场文书
初中运动会前导词
2015/07/20 职场文书
python实现socket简单通信的示例代码
2021/04/13 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android