Ajax Post提交复杂JSON对象的简便有效方法（适用jQuery-Ajax和原生JS XMLHttpRequest POST）

用Ajax Post提交非常复杂JSON对象，是一件麻烦的事，如果以简单JSON对象的提交思维来设计复杂JSON对象时，经常出现各种问题。现在找到了一个非常简便有效的方法，跟大家分享下。

下面，用SpringBoot，演示下jQuery Ajax Post如何提交以下复杂JSON对象，代码如下：

/**
 * 销售明细
 * 
 * @author sunchangtan
 *
 */
@Data
public class SellDetail {
	private long sellId;
	private String userNo;
	private User user;
	private List<Order> orders;
}

@Data
public class User {
	private Integer userId;

	private String userName;

	private String password;

	private String phone;

	private String email;
}

@Data
public class Order {
	private String orderId;
	private String userId;
	private Date placeTime;
	private List<Production> productions;
}

@Data
public class Production {
	private String skuId;
	private String proId;
	private String name;
	private double price;
	private int number;
}

（1）Ajax提交的数据对象的Key值，以扁平方式写法，其实就是Spring支持的对象属性访问方式。 如果直接使用js对象提交，会出现各种问题，比如后台直接接受一部分数据等，尤其使用原生的XMLHttpRequest，问题会更多了。以前本人经常为此头疼不已

<script type="text/javascript">
	    //<![CDATA[
	    	$(function() {
	    		var data = {};
	    		data['sellNo'] = 2002;
	    		data['userNo'] = '1001';
	    		data['user.userId'] = 2002;
	    		data['user.userName'] = 'suncht';
	    		data['user.phone'] = '1850111111';
	    		data['user.email'] = '[email protected]';
	    		
	    		data['orders[0].orderId'] = '1212';
	    		data['orders[0].userId'] = '1001';
	    		data['orders[0].placeTime'] = '2018-06-07 10:10:10';
	    		data['orders[0].productions[0].skuId'] = '120123134';
	    		data['orders[0].productions[0].proId'] = '32113';
	    		data['orders[0].productions[0].name'] = 'JAVA教程';
	    		data['orders[0].productions[0].price'] = 64.5;
	    		data['orders[0].productions[0].number'] = 1;
	    		data['orders[0].productions[1].skuId'] = '123324';
	    		data['orders[0].productions[1].proId'] = '63452';
	    		data['orders[0].productions[1].name'] = 'SpringBoot教程';
	    		data['orders[0].productions[1].price'] = 54.5;
	    		data['orders[0].productions[1].number'] = 2;
	    		
	    		data['orders[1].orderId'] = '245';
	    		data['orders[1].userId'] = '1001';
	    		data['orders[1].placeTime'] = '2018-05-07 10:10:10';
	    		data['orders[1].productions[0].skuId'] = '1234';
	    		data['orders[1].productions[0].proId'] = '76243';
	    		data['orders[1].productions[0].name'] = '加湿器';
	    		data['orders[1].productions[0].price'] = 70.3;
	    		data['orders[1].productions[0].number'] = 1;
	    		data['orders[1].productions[1].skuId'] = '5345';
	    		data['orders[1].productions[1].proId'] = '1345';
	    		data['orders[1].productions[1].name'] = '车载导航仪';
	    		data['orders[1].productions[1].price'] = 254.5;
	    		data['orders[1].productions[1].number'] = 1;
	    		
	    		
	    		$('#btnSubmitJsonObj').on('click', function() {
	    			$.ajax({
					  	type: 'POST',
					  	url: '/json/submit01',
					  	data: data,
					  	success: function(data) {
					  		if(data && data.code == 1) {
					  			alert('提交成功')
					  		} else {
					  			alert(data.msg);
					  		}
					  	},
					  	dataType: 'json'  //返回的数据格式：json/xml/html/script/jsonp/text
    				});
	    		});
	    	});
	    //]]>
	    </script>

（2）Controller中接受Post的方法：

@RequestMapping("/json/submit01")
	@ResponseBody
	public ResponseResult submit01(SellDetail sellDetail) {
		System.out.println(sellDetail.toString());
		return ResponseResult.builder().code(ResponseResult.SUCCESS).build();
	}

（3）Order类中有Date类型的数据，SpringMVC不能直接将字符串转为Date类，这需要使用类型转换器

在Controller类中添加如下代码：

@InitBinder
	protected void initBinder(WebDataBinder binder) {
		binder.registerCustomEditor(Date.class, new CustomDateEditor(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"), true));
	}

这样就可以完美解决提交非常复杂的JSON对象了。