Array的Prototype属性添加序列化方法,实现Ajax提交List数据
在Ajax提交数据的时候,前端做成List数据,后端也以List对象来接收前端数据。
这样可以适当减轻枯燥的数据转换。
1、在数组的 [Prototype] 属性添加序列化方法。/** * 序列化指定的数组 * @param listName 序列化后的名 * @returns 序列化结果 * 例: * var inArray = [{item1:item1Value,item2:item2Value} ,{item1:item21Value,item2:item22Value}] * inArray.stringify("inputArray"); * 序列化结果{inputArray[0].item1:item1Value,inputArray[0]item2:item2Value ,inputArray[1].item1:item21Value,inputArray[1]item2:item22Value} */ Array.prototype.stringify = function(listName) { var returnObject = {}; var currentArray = this; for (var i = 0; i < currentArray.length; i++) { var currentArrayItem = currentArray[i]; for (var item in currentArrayItem) { returnObject[listName + "[" + i + "]." + item.toString()] = currentArrayItem[item]; } } return returnObject; };
2、Ajax提交List方法。//Ajax提交List function sampleAjaxSubmit() { var sortFields = []; var sortFieldDto = {}; //排序列索引 sortFieldDto.sortFieldColNum = 0; //排序列名 sortFieldDto.sortFieldName = "colModelName"; //排序关键字 sortFieldDto.sortKeyword = "ASC"; sortFields.push(sortFieldDto); //调用上述自定义的序列化方法 var jsDataIn = sortFields.stringify("sortFields"); $.ajax({ extraUrl: "xxxxxController/xxxxMethod",// 参照文章【编程技巧:Ajax请求时,避免重复设定部署名ContextPath】 data: jsDataIn, traditional: true,//禁用序列化深层对象 success: function( data, textStatus, jqXHR) { } }); }
3、接收Ajax提交信息的类import java.util.List; import lombok.Getter; import lombok.Setter; /** * Form类 * */ @Getter @Setter public class SampleForm { /** 排序信息 */ public List sortFields; }
4、接收前端提交的List信息的类import lombok.Getter; import lombok.Setter; /** * 排序信息类。 */ @Setter @Getter public class SortFieldDto { /** 排序列索引 */ public Integer sortFieldColNum; /** 排序列名 */ public String sortFieldName; /** 排序关键字 */ public String sortKeyword; }