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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 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代码简化
2010/02/08 PHP
APACHE的AcceptPathInfo指令使用介绍
2013/01/18 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
js回调函数仿360开机
2019/12/26 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python之py2exe打包工具详解
2017/06/14 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
关于爱国的标语
2014/06/24 职场文书
招标授权委托书样本
2014/09/23 职场文书
机关作风建设心得体会
2014/10/22 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Go语言并发编程 sync.Once
2021/10/16 Golang