springmvc 结合ajax批量新增的实现方法

1. 需要注意的问题

mvc框架的处理日期问题
@ResponseBody响应对象是自定义对象，响应不是json
@ResopnseBody响应自定义对象时，日期为是long类型的数
结束数据方法的参数，该如何定义？接收多个对象？

2. 页面代码

<%@ page language=\”java\” isELIgnored=\”false\” contentType=\”text/html; charset=UTF-8\”
pageEncoding=\”UTF-8\”%>

<html>
<head>
<meta http-equiv=\”Content-Type\” content=\”text/html; charset=UTF-8\”>
<title>ajax批量新增操作</title>

</head>

<body>

<form id=\”myForm\”>
<table border=\”1\” >
<tr>
<td>姓名</td>
<td>身份证</td>
<td>时间</td>
<td>direction</td>
<td>type</td>
<td>操作</td>
</tr>

</tr>
</tbody>

</table>
</form>

$(\”body\”).on(\’click\’, \’.remove\’, function() {
// 移除当前行, 通过父级来绑定…
// $(this).parent().parent().remove();

$(\”#tbody tr\”).remove();

// 覆盖，生成行
if (index_val > 0) {
var data_str = \”\”;
for (var i = 0; i < index_val; i++) {

data_str +=
\”<tr>\” +
\”<td>\” +
\” <input type=\’text\’ name=\’visitorList[\” + i + \”].name\’/>\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’text\’ name=\’visitorList[\” + i + \”].cardNo\’/>\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’date\’ name=\’visitorList[\” + i + \”].visitorTime\’/>\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’radio\’ value=\’1\’ name=\’visitorList[\” + i + \”].direction\’/>进入\” +
\” <input type=\’radio\’ value=\’2\’ name=\’visitorList[\” + i + \”].direction\’/>离开\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’radio\’ value=\’1\’ name=\’visitorList[\” + i + \”].type\’/> 内部\” +
\” <input type=\’radio\’ value=\’2\’ name=\’visitorList[\” + i + \”].type\’/> 外部\” +
\”</td>\” +

\”<td>\” +
\” <input class=\’remove\’ type=\’button\’ value=\’移除\’>\” +
\”</td>\” +

\”</tr>\”;
}
$(\”#tbody\”).append(data_str);
}

// 把下标减少一就行了，就是移除了。
index_val –;

console.log(\”remove: \”, index_val);
});

$(\”#add\”).click(function() {

// 自增1
index_val ++;

var data_str =
\”<tr>\” +
\”<td>\” +
\” <input type=\’text\’ name=\’visitorList[\” + index_val + \”].name\’/>\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’text\’ name=\’visitorList[\” + index_val + \”].cardNo\’/>\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’date\’ name=\’visitorList[\” + index_val + \”].visitorTime\’/>\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’radio\’ value=\’1\’ name=\’visitorList[\” + index_val + \”].direction\’/>进入\” +
\” <input type=\’radio\’ value=\’2\’ name=\’visitorList[\” + index_val + \”].direction\’/>离开\” +
\”</td>\” +

\”<td>\” +
\” <input type=\’radio\’ value=\’1\’ name=\’visitorList[\” + index_val + \”].type\’/> 内部\” +
\” <input type=\’radio\’ value=\’2\’ name=\’visitorList[\” + index_val + \”].type\’/> 外部\” +
\”</td>\” +

\”<td>\” +
\” <input class=\’remove\’ type=\’button\’ value=\’移除\’>\” +
\”</td>\” +

\”</tr>\”;

$(\”#tbody\”).append(data_str);

console.log(\”add==>\” + index_val);
});

$(\”#save\”).click(function() {
var form_data = $(\”#myForm\”).serialize();

// console.log(form_data)

$.ajax({
url: \”visitor/batchAdd\”,
type: \”post\”,
data: form_data,
success: function(data) {
console.log(data);
},
error: function(e) {
console.log(e);
}
});
});
});
</script>

</body>
</html>

js学得terrible… 能够移除，我的移除是先移除所有的行，重新生成行，比较之前生成的行，少一行。

3. controller定义参数接收

批量新增实体类BatchVisitor ，定义集合接收多个对象

package cn.bitqian.entity;

import java.util.ArrayList;
import java.util.List;

/**
* 批量新增 visitorInfo
* @author echo lovely
*
*/
public class BatchVisitor {

private List<VisitorInfo> visitorList = new ArrayList<>();

public List<VisitorInfo> getVisitorList() {
return visitorList;
}

public void setVisitorList(List<VisitorInfo> visitorList) {
this.visitorList = visitorList;
}

public BatchVisitor() {}

}

controller方法，放实体类，实体类里面套VisitorInfo的集合

@RequestMapping(value=\”/batchAdd\”, method=RequestMethod.POST)
@ResponseBody
public VisitorInfo batchAddVisitor(BatchVisitor batchVisitor) {
List<VisitorInfo> visitorList = batchVisitor.getVisitorList();

// System.out.println(batchVisitor);

for (VisitorInfo visitorInfo : visitorList) {
System.out.println(visitorInfo);

visitorInfoService.save(visitorInfo);
}

return new VisitorInfo(1, \”dd\”, \”bb\”, new Date(), 1, 2);
}

对于上面响应了对象到页面，会报错，需要导入json的依赖。

<!– json 用于响应 responseBody –>
<!– https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind –>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.6</version>
</dependency>

接收页面的参数，需要字符串转型为日期，需要
mvc自定义日期转换器
或者加上注解，mvc会将字符串转换为对应格式的日期