JQuery中serialize用法实例分析.doc

　　这篇文章主要介绍了JQuery中serialize()用法,实例分析了serialize()方法的功能、定义及相关使用技巧,需要的朋友可以参考下
　　本文实例讲述了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",
　　,
　　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
　　}]
　　更多信息请查看IT技术专栏