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 相关文章推荐
jquery表单验证使用插件formValidator
Nov 10 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
layer提示框添加多个按钮选择的实例
Sep 12 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
PHP&amp;MYSQL服务器配置说明
2006/10/09 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
php对数组排序代码分享
2014/02/24 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
thinkphp分页实现效果
2016/10/13 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
js控制台输出的方法(详解)
2016/11/26 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
2020/06/01 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
python网络编程之数据传输UDP实例分析
2015/05/20 Python
Python实现的栈(Stack)
2018/01/26 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
python清除函数占用的内存方法
2018/06/25 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python函数式编程实例详解
2020/01/17 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
Linux常见面试题
2016/10/04 面试题
建筑工程专业毕业生自荐信
2013/10/19 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL