1.前端数据展示:
<div class="pagebox">
<div class="module">
<table>
<tr>
<td>name:</td>
<td><input class="name" type="text" value="xxx(name)"></td>
</tr>
<tr>
<td>mobile:</td>
<td><input class="mobile" type="text" value="xxx(mobile)"></td>
</tr>
</table>
</div>
<!--多个相同的module -->
</div>
2.前端数据获取:
var personList = new Array(); //定义数组,用来存放对象
function getAllList(obj) {
var dSize = obj.find($(".module")) ? obj.find($(".module")).length : 0; //长度
var list = obj.find($(".module"));
for(var i = 0; i < dSize; i++) {
var myObject = {};
var item = list.eq(i);
myObject.name = item.find(".name").val(); //取值
myObject.mobile = item.find(".mobile").val();
personList.push(myObject); // 添加元素到数组
}
}
3.前端数据提交
var personData = getAllList($(".pagebox"));
jQuery.ajax({
type:"post",
url:"#springUrl('/test/getAllPerson.htm')",
data:{
"personList":JSON.stringify(personData) //数组转字符串,用于提交到后端
},
dataType:"json",
success:function(result) {
if("0" == result.code) { //提交数据返回成功
// TODO 成功处理
} else { //提交数据返回失败
// TODO 失败处理
}
},
error:function() { //ajax提交失败
console.log("error");
}
});
4.后端数据解析(使用的是com.alibaba.fastjson.JSONArray包)
@RequestMapping(value = "/getAllPerson",method= {RequestMethod.POST}
@UserLogRecord(name = "XXX")
@RestfulAction
public void getAllPerson(HtttpServletRequest request,String personList) {
// 校验
if(StringUtils.isBlank(personList)) {
return;
}
//json字符串解析为list
List<Person> list = JSONArray.parseArray(personList,Person.class);
//TODO 业务代码
}