Form表单使用Jquery serializeArray()与serialize()的区别

时间 2019-11-11

标签 form 表单使用 jquery serializearray serialize 区别栏目 HTML 繁體版

原文原文链接

serialize()序列化表单元素为字符串，用于 Ajax 请求。javascript

serializeArray()序列化表单元素为JSON数据。html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test - jquery.pagination.js</title>
    <script src="jquery-1.11.2.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <div style="width:1000px; margin:0 auto;">
       <form id="myForm" action="#">  
    <input name="name"/>  
    <input name="age"/>  
    <select multiple="multiple" name="interest" size="2">  
        <option value ="interest1">interest1</option>  
        <option value ="interest2">interest2</option>  
        <option value="interest3">interest3</option>  
        <option value="interest4">interest4</option>  
    </select>  
    <input type="checkbox" name="vehicle" value="Bike" /> I have a bike  
    <input type="checkbox" name="vehicle" value="Car" /> I have a car  
   <a href="javascript:void(0)" id="btnClick">获取链接</a>
</form>  
       
    </div>
    <script>
        (function($){  
        $.fn.serializeJson=function(){  
            var serializeObj={};  
            var array=this.serializeArray();  
            var str=this.serialize();  
            $(array).each(function(){  
                if(serializeObj[this.name]){  
                    if($.isArray(serializeObj[this.name])){  
                        serializeObj[this.name].push(this.value);  
                    }else{  
                        serializeObj[this.name]=[serializeObj[this.name],this.value];  
                    }  
                }else{  
                    serializeObj[this.name]=this.value;   
                }  
            });  
            return serializeObj;  
        };  
    })(jQuery);
    
    
    $("#btnClick").bind("click",function(e){
        console.log($("#myForm").serialize());
        console.log($("#myForm").serializeArray());
        console.log($("#myForm").serializeJson()); 
    });      
    </script>
</body>
</html>

输出的java

serialize() ： name=1111&age=2222&interest=interest1&interest=interest2&vehicle=Bike
serializeArray: jquery

如上图，能够看出inserest元素，成了两个json key，而不是一个，这个会有个问题，传值到后台，只会接收到最后一个key - value ，因此是interest2 。。改为的方法。json

(function($){  
        $.fn.serializeJson=function(){  
            var serializeObj={};  
            var array=this.serializeArray();  
            var str=this.serialize();  
            $(array).each(function(){  
                if(serializeObj[this.name]){  
                    if($.isArray(serializeObj[this.name])){  
                        serializeObj[this.name].push(this.value);  
                    }else{  
                        serializeObj[this.name]=[serializeObj[this.name],this.value];  
                    }  
                }else{  
                    serializeObj[this.name]=this.value;   
                }  
            });  
            return serializeObj;  
        };  
    })(jQuery);

改进后，获取的json，以下图。interest 将两个值放入了数组。数组

备注：file、image、button、submit、reset都不会被序列化this

参考： http://www.cnblogs.com/ningvsban/p/3659605.htmlspa