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的跨域数据传输更是提供了很大的帮助。