JQuery中serialize()用法实例分析


Posted in Javascript onFebruary 06, 2015

本文实例讲述了JQuery中serialize()用法。分享给大家供大家参考。具体分析如下:

一、serialize()定义和用法:

serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象。你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
 
语法:

$(selector).serialize()
 
详细说明

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

2、.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些

3、只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。
 
4、form里面的name不能够用 Js、jquery里的关键字。
例如:length

<form id="form1">

   <input name="length" type="text" value="pipi" />

   <input name="blog" type="text" value="blue submarine" />

</form>
//使用:$("#form1").serialize();

上面则获取不到值。
 
二、JQuery中serialize()实例
 
1、ajax serialize()

$.ajax({

    type: "POST",

    dataType: "json",

    url:ajaxCallBack,

    data:$('#myForm').serialize(),// 要提交表单的ID

    success: function(msg){

        alert(msg);

    }

});

2、serialize() 序列化表单实例

<script src="jquery-1.7.min。js"></script>

<script>

$(function(){

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

     alert($("#myForm").serialize());

   });

});

</script>

<form id="myForm">

昵称 <input type="text" name="username" value="admin" /><br />

密码 <input type="password" name="password" value="admin123" /><br />

<input type="button" id="submit" value="序列化表单" /> 

</form>

点击按钮之后弹出:

username=admin&password=admin123
 
三、serialize是用param方法对serializeArray的一个简单包装
 
1、$.param()

$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化。
 
param方法的js代码

param: function( a ) {

///    <summary>

///        This method is internal.  Use serialize() instead.

///    </summary>

///    <param name="a" type="Map">A map of key/value pairs to serialize into a string.</param>'

///    <returns type="String" />

///    <private />
var s = [ ];
function add( key, value ){

    s[ s.length ] = encodeURIComponent(key) + '=' + encodeURIComponent(value);

};
// If an array was passed in, assume that it is an array

// of form elements

if ( jQuery.isArray(a) || a.jquery )

    // Serialize the form elements

    jQuery.each( a, function(){

 add( this.name, this.value );

    });
// Otherwise, assume that it's an object of key/value pairs

else

    // Serialize the key/values

    for ( var j in a )

 // If the value is an array then the key names need to be repeated

 if ( jQuery.isArray(a[j]) )

     jQuery.each( a[j], function(){

  add( j, this );

     });

 else

     add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] );
// Return the resulting serialization

return s.join("&").replace(/%20/g, "+");

}

例如:

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k);    //输出a=1&b=2&c=3

 
2、serializeArray
 
serializeArray方法是将一个表单当中的各个字段序列化成一个数组
serializeArray方法的jquery定义
serializeArray: function() {

///    <summary>

///        Serializes all forms and form elements but returns a JSON data structure.

///    </summary>

///    <returns type="String">A JSON data structure representing the serialized items.</returns>
return this.map(function(){

    return this.elements ? jQuery.makeArray(this.elements) : this;

})

.filter(function(){

    return this.name && !this.disabled &&

 (this.checked || /select|textarea/i.test(this.nodeName) ||

     /text|hidden|password|search/i.test(this.type));

})

.map(function(i, elem){

    var val = jQuery(this).val();

    return val == null ? null :

 jQuery.isArray(val) ?

     jQuery.map( val, function(val, i){

  return {name: elem.name, value: val};

     }) :

     {name: elem.name, value: val};

    }).get();

}

serializeArray数据例子:

[ { 

 name : username, 

 value : 中国 

 }, { 

 name : password, 

 value : xxx 

}]

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
可以将word转成html的js代码
Apr 11 Javascript
模拟select的代码
Oct 19 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
jQuery中on()方法用法实例详解
Feb 06 #Javascript
JS实现文字向下滚动完整实例
Feb 06 #Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
js实现图片从左往右渐变切换效果的方法
Feb 06 #Javascript
js实现多选项切换导航菜单的方法
Feb 06 #Javascript
You might like
改造一台复古桌面收音机
2021/03/02 无线电
做网页的一些技巧
2007/02/01 Javascript
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
轻松掌握python设计模式之访问者模式
2016/11/18 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python 制作查询商品历史价格的小工具
2020/10/20 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
银行领导证婚词
2014/01/11 职场文书
优秀教师的感人事迹
2014/02/04 职场文书
关于责任的演讲稿
2014/05/20 职场文书
个人向公司借款协议书
2014/10/09 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
Python中文纠错的简单实现
2021/07/07 Python
漫画《催眠麦克风-Dawn Of Divisions》第二卷PV公开
2022/04/05 日漫
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python