基于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);
}

使用方法

contentType:’application/json’必须写,否则数据不是json

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

HTML示例：

	<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接收：

@RequestBody可以把json字符串转换为json数据，赋值给对象

@Controller
public class MyController {
        @RequestMapping("findUser")
	public   String  findUser(@RequestBody User  user){
		
		System.out.println("MenuController.findUser()\nfav:"+user);
		
		return  "success";
	}
}

实体类示例：

import java.util.Arrays;


public class User {

	
	private   int  uid;
	
	private String uname;
	
	private  String  pwd;
	
	private  String[]  fav;

	public String[] getFav() {
		return fav;
	}

	public void setFav( String[] fav) {//@RequestParam(value="fav" ,required=false)
		System.out.println("User.setFav()");
		this.fav = fav;
	}

	public int getUid() {
		return uid;
	}

	public void setUid(int uid) {
		this.uid = uid;
	}

	public String getUname() {
		return uname;
	}

	public void setUname(String uname) {
		System.out.println("User.setUname()");
		this.uname = uname;
	}

	public String getPwd() {
		System.out.println("User.getPwd()");
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public User(int uid, String uname, String pwd, String[] fav) {
		super();
		this.uid = uid;
		this.uname = uname;
		this.pwd = pwd;
		this.fav = fav;
	}

	public User() {
		super();
	}
	
	@Override
	public String toString() {
		return "User [uid=" + uid + ", uname=" + uname + ", pwd=" + pwd + ", fav=" + Arrays.toString(fav) + "]";
	}
}