js序列化封裝成一個對象,以鍵值對的方式
類似:Object {ni: "1", wo: "2", ta: "3", huge: "4", jindong: "5"…}
jquery的serialize()方法,得到等值的方式
類似:"ni=1&wo=2&ta=3&huge=4&jindong=5&liukaiwei=6"
jquery的serializeArray()方法,得到一個對象里面有N個對象,每一個鍵值對都是以對象形式存在
類似:[Object, Object, Object, Object, Object, Object] 每個對象是以鍵值對存在{ "name" : "ni" , "value" : "1" }
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{font-size: 14px;color: #555555;font-family: "微軟雅黑";}
*{padding: 0px;margin: 0px;}
ul,li{list-style: none;}
a{text-decoration: none;}
form{margin: 50px auto 0px;width: 500px;}
form ul li{margin: 10px 0px;}
input{margin-right: 10px;}
</style>
</head>
<body>
<form id="form">
<ul>
<li><input type="text" name="ni"/><label>你</label></li>
<li><input type="text" name="wo"/><label>我</label></li>
<li><input type="text" name="ta"/><label>他</label></li>
<li><input type="text" name="huge"/><label>胡歌</label></li>
<li><input type="text" name="jindong"/><label>靳東</label></li>
<li><input type="text" name="liukaiwei"/><label>劉愷威</label></li>
</ul>
<button type="button" id="submit">提交</button>
</form>
</body>
</html>
JS
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript">
// 表單序列化插件 (function($){ $.fn.serializeObject=function(){ var o={}; var a=this.serializeArray(); $.each(a, function() { if(o[this.name]){ if(!o[this.name].push){ o[this.name]=[o[this.name]]; } o[this.name].push(this.value||''); }else{ o[this.name]=this.value||''; } }); return o; }; })(jQuery);
//form序列化
$("#submit").click(function(){
var jsSerialize=$("#form").serializeObject(); //js封裝
var jquerySerialize=$("#form").serialize(); //jquery的serialize()方法
var jquerySerializeArray=$("#form").serializeArray(); //jquery的serializeArray()方法
});
</script>
附 可以向這個對象中添加新的鍵值對,有多種方法添加
jsSerialize.tao="7";
var name2="Dong";
jsSerialize[name2]="8";
form表單中如果有name相同的input,除非都為空,為name:'' ''類型,其他存的都是數組