基于json字符串的前后端交互：表单序列化成json字符串，解决checkbox覆盖前一个值的问题

/** 表单序列化成json字符串的方法 */
function form2JsonString(formId) {
//获取准备提交后台的表单域数组Array(size) [ { name: "uname", value: "12312" }, {…}, {name: "fav", value: "2"}, {name: "fav", value: "2"} ]
var paramArray = $('#' + formId).serializeArray();
/*请求参数转json对象*/
var jsonObj={};
//复选框数组
var arr=[];
//$("#loginForm input[type=checkbox]").attr("name")返回第一个复选框的name值
console.log( $("#"+formId+" input[type=checkbox]").attr("name"));
//遍历该checkbox
$("#"+formId+" input[type=checkbox]").each(function(){
//判断该复选框是否被选中
if($(this).prop("checked")){
//把该复选框的属性value的值放入arr数组
arr.push(this.value);
}
});
//遍历表单域数组
$(paramArray).each(function(){
//判断该数组元素是否为复选框
if(this.name==$("#"+formId+" input[type=checkbox]").attr("name")){
//遇到复选框把arr数组给他，多次赋值同一个this.name会覆盖前一个
jsonObj[this.name]=arr;
}else{
//其他元素直接把属性value的值给他
jsonObj[this.name]=this.value;
}

});
console.log(paramArray);
console.log(jsonObj);
// json对象再转换成json字符串
return JSON.stringify(jsonObj);
}

 

 

$.ajax({
url: "/ssm-easyui/findUser",
type:'post',
contentType:'application/json',
data:form2JsonString('loginForm'),
success: function(result){
console.info(result);
}
});

 

<div id="loginAndRegisterDialog" style="width:400px;height:400px;">
<form id="loginForm" action="" method="post">
<div>
用户名：<input id="uanme" name="uname" />
<br/>
&nbsp;&nbsp;&nbsp;密码：<input id="pwd" name="pwd"/>
<br/>
<input type="checkbox" name="fav" id="fav1" value="1" />打篮球
<input type="checkbox" name="fav" id="fav2" value="2" />踢足球
<input type="checkbox" name="fav" id="fav3" value="3" />打乒乓球
</div>
</form>
</div>
后端采用SpringMVC接收：
————————————————

@Controller
public class MyController {
@RequestMapping("findUser")
public String findUser(@RequestBody User user){

System.out.println("MenuController.findUser()\nfav:"+user);

return "success";
}
}