您的位置：首页 > Web前端 > JQuery

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

2016-06-03 00:00 483 查看

摘要: 修正serializeArray() bug

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

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

[code=language-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>

输出的

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

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

[code=language-javascript](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都不会被序列化

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Jquery serialize serializeArray

相关文章推荐

新的分享

章节导航