这两天在做导出改造,将以前的导出功能拆分,前后台都要改。
现状:
要导出的表头我们叫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);
}
});
}
添加了contentType: 'application/json'
此时,后台接收不到:
浏览器控制台内容:
可以看到, 只是添加contentType: 'application/json',浏览器认为你是以字符串形式提交数据,在提交前已经将内容转义了,这样这个数据格式,无法正确发起请求。
必须将发送的数据内容转成JSON字符串形式:
后端必须使用Map或者对应的Java对象接收,并且需要加@RequestBody注解:
看一下前端请求的信息
可以看到,发出去的是json字符串,符号没有被转义(只对里面的双引号做了转义) 。
然后看看浏览器拿到的response数据:
总结:
1、如果不指定contentType: 'application/json',默认传入内容的格式是表单提交的形式,contentType是application/x-www-form-urlencoded。
对参数数据的要求是:发过去的必须是一个json对象,不是字符串。json对象的Key对应后台接收的参数名,值必须是json字符串,否则后台也是接收不到。下面这种写法,tableMap本身是一个JSON对象,必须转成JSON字符串,否则后台接收的将是null:
前端正确的写法:
后端正确写法一:
后端正确写法二:
2、使用ajax发送json内容时,除了指定 contentType: 'application/json',还需要将发送的数据转成json字符串。
后台也要使用@ResponseBody注解,使用Map或者相应的Java对象接收。
前端正确的写法:
后端正确的写法: