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