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 相关文章推荐
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
网页右侧悬浮滚动在线qq客服代码示例
Apr 28 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
微信小程序服务器日期格式化问题
Jan 07 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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 无线电
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
JSON相关知识汇总
2015/07/03 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python中return语句用法实例分析
2015/08/04 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
200行python代码实现2048游戏
2019/07/17 Python
Django框架视图函数设计示例
2019/07/29 Python
通俗讲解python 装饰器
2020/09/07 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
优秀的应届生自荐信
2014/05/23 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
停车场管理制度范本
2015/08/05 职场文书
值班管理制度范本
2015/08/06 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android