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

浅浅的花香味﹌ 2022-05-23 10:27 260阅读 0赞

用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'] = 'xxxxxxx@163.com';
    	    		
    	    		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对象了。

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生ajax请求：get和post

'get’请求 <script> window.onload=funciton(){ // 创建ajax

末蓝、/ 2023年07月06日 06:12/ 0 赞/ 49 阅读

相关 JS原生Ajax(XMLHttpRequest对象)

Ajax 用途：主要是引用于异步交互，当使用Ajax模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载(刷新)整个页面。这使得HTML页面能成更快速

小鱼儿/ 2022年12月04日 01:22/ 0 赞/ 143 阅读

相关原生js ajax封装post，get方法

方法一： function ajax(method, url, callback, data, flag) { var xhr; fl

冷不防/ 2022年09月08日 11:49/ 0 赞/ 256 阅读

相关 ajax json post,jQuery ajax POST json

You are probably passing encoded Unicode characters to decode\_json, not binary UTF-8 ch

待我称王封你为后i/ 2022年09月03日 12:12/ 0 赞/ 246 阅读

相关 ajax使用POST提交json数据

$(document).ready(function () { var schoolList={ "pageCount": "2",

梦里梦外;/ 2022年05月29日 12:06/ 0 赞/ 309 阅读

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

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

浅浅的花香味﹌/ 2022年05月23日 10:27/ 0 赞/ 261 阅读

相关使用原生$.ajax()发送post请求和$.post()请求的区别

jquary中的$.post()方法是对$.ajax()方法的一种封装 , 可以对使用$.ajax()发送post请求的过程做出一定的简化 , 但在使用SpringMVC的Co

秒速五厘米/ 2022年05月07日 04:00/ 0 赞/ 305 阅读

相关 Ajax原生GET和POST请求及Jquery Ajax的GET和POST请求

![20190121224107405.png][] Ajax原生GET请求接口： / 原生Ajax GET请求 / function

迈不过友情╰/ 2022年04月23日 00:06/ 0 赞/ 563 阅读

相关原生Ajax post提交

function CreateXmlRequest(){ var xmlHttp=null; if(window.XMLHttpRe

Love The Way You Lie/ 2022年04月16日 03:07/ 0 赞/ 259 阅读

相关 Ajax ajax原生-xhr对象处理post请求

post请求提交的表单数据创建表单数据 var 变量=new FormData(); 给表单

左手的ㄟ右手/ 2021年07月24日 12:09/ 0 赞/ 516 阅读