Ajax+Spring MVC前后端交互问题

这两天在做导出改造，将以前的导出功能拆分，前后台都要改。

现状：

要导出的表头我们叫tableMap，是一个JSON字符串，也是用来匹配查询结果集的。

项目中有的模块做的导出功能，是后台拼接这个tableMap的，也有的模块做的导出，是前台传过来的tableMap，两种使用方式。

前台传过来的tableMap，通过前端jquery，根据台账表头获取到想要导出的字段，拼装成javascript数组，改造前，使用表单提交。

改造后，使用ajax提交，需要用ajax的会调用结果进一步处理数据处理的状态。

html页面：

<table id="tableId1">
	<thead>
		<tr>
			<th columnName="id"></th>
			<th columnName="name"></th>
			<th columnName="gender"></th>
			<th columnName="email"></th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

数据组装

function getData() {
	var tableMap = {};

	//根据table的id获取table的jquery对象$table
	var $table = $("#tableId1");

	//tableArray是用来存储业务对象的数组
	var tableArray = [];
	//遍历table中th属性为columnName的元素，遍历的是jquery对象
	$table.find("thead th[columnName]").each(function(i,n){
		var $this = $(this);

		//用th标签上的属性columnName及其值，作为tableArray的内容
		tableArray.push({
			columnName: $this.attr('columnName')
		});
	});

	//将获取到的tableArray数组设置到tableMap对象中，tableId1为键，tableArray为值
	tableMap["tableId1"] = tableArray;
	return tableMap;
}

数据组装的效果：

AJAX提交表单数据

function fSaveByJsonObject(url ,tableMap) {
	//构造ajax传输的参数，ajax传输的内容必须是一个对象，这里设置tableMap字符串作为键，tableMap的json字符串作为value
	var param = {"tableMap":JSON.stringify(tableMap)};

	//不指定contentType: 'application/json'，传输的是什么内容格式？
	$.ajax({
		url: url,
		method: 'post',
		data: param,
		success: function(data) {
			console.log(data);
		},
		error: function(data) {
			console.log("error...");
			console.log(data);
		}
	});
}

不指定contentType: 'application/json'，传输的是什么内容格式？

不指定contentType: 'application/json'，请求的数据传输的格式是application/x-www-form-urlencoded ，也就是说，不指定contentType: 'application/json'，默认以表单形式提交数据。

可以看到Form Data中的格式，是一个键值对的形式，只要后台用一个叫tableMap的字符串接收即可。

看后台：

@RequestMapping(value = "/save")
@ResponseBody
public String save(String tableMap) {
	return tableMap;
}

代码参见

AJAX提交JSON数据

如何正确使用ajax传输json数据

前台ajax提交数据的方法稍作改动：

function fSaveByJsonObject(url ,tableMap) {
	//构造ajax传输的参数，ajax传输的内容必须是一个对象，这里设置tableMap字符串作为键，tableMap的json字符串作为value
	var param = {"tableMap":JSON.stringify(tableMap)};

	//不指定contentType: 'application/json'，传输的是什么内容格式？
	$.ajax({
		url: url,
		method: 'post',
		data: param,
		contentType: 'application/json',
		success: function(data) {
			console.log(data);
		},
		error: function(data) {
			console.log("error...");
			console.log(data);
		}
	});
}