Jquery中的serialize()

        在jQuery中，当我们使用ajax时，常常需要拼装input数据以键值对（Key/Value）的形式发送到服务器，这时候我们

就需要用JQuery的serialize方法，使用这个方法可以将表单序列化为键值对（key1=value1&key2=value2…）后提交。大

家是不是想到我们上篇文章提到的$.getJSON？

一、serialize()定义和用法：

  

         serialize()方法通过序列化表单值，创建标准的URL编码文本字符串，它的操作对象是代表表单元素集合的jQuery对

象。你可以选择一个或多个表单元素（比如input或文本框），或者 form元素本身。序列化的值可在生成 AJAX请求时

用于 URL查询字符串中。

语法：

    

  $(selector).serialize()

详细说明

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

       2、.serialize()方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea>以及<select>。不过，选择

<form>标签本身进行序列化一般更容易些

     

       3、只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单

元素的值包含到序列字符串中，元素必须使用name 属性。

 

二、JQuery中serialize()实例

 

1、ajax serialize()

 

<span style="font-size:18px;">$.ajax({type:"POST", dataType:"json", url:ajaxCallBack, data:$('#myForm').serialize(),//要提交表单的ID success:function(msg){ alert(msg); }});</span>

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

 

  <scriptsrc="jquery-1.7.min。js"></script><script>$(function(){   $("#submit").click(function(){     alert($("#myForm").serialize());   });});</script><formid="myForm">昵称 <inputtype="text" name="username" value="admin"/><br />密码 <inputtype="password" name="password" value="admin123"/><br /><inputtype="button" id="submit" value="序列化表单" /></form>

 

三、serialize是用param方法对serializeArray的一个简单包装

1、$.param()

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

 param: function( a ) {        ///   <summary>        ///        This method is internal.  Use serialize() instead.        ///   </summary>        ///   <param name="a" type="Map">A map of key/valuepairs 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, assumethat 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 anobject of key/value pairs        else            // Serialize the key/values            for ( var j in a )                // If the value is an arraythen 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        returns.join("&").replace(/%20/g, "+");    }

2、serializeArray

     serializeArray方法是将一个表单当中的各个字段序列化成一个数组。

 

serializeArray:function() {        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();    }

总结：

         serialize()和serializeArray是jquery为协助ajax而封装的诸多函数中的两个也可以说是一个，它大大简化了数据

的传输，尤其是表单的传输更加的简便和快捷。对jquery的跨域数据传输更是提供了很大的帮助。