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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
ES6函数和数组用法实例分析
May 23 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新手上路(三)
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
php 数组使用详解 推荐
2011/06/02 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
详解tween.js 中文使用指南
2018/01/05 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
react同构实践之实现自己的同构模板
2019/03/13 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
python初步实现word2vec操作
2020/06/09 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
使用canvas来完成线性渐变和径向渐变的功能的方法示例
2019/07/25 HTML / CSS
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
同学聚会邀请函
2015/01/30 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技