應用場景:盤點需要批量修改,如圖所示
當我點擊盤點的時候需要獲取form表單中的批量數據;
思路:首先,各位肯定知道我們如何傳遞一個常用類型的數組對象,比如String[] strs、Integer[] ids之類的對象,最常見的操作,批量刪除!同樣,傳遞對象數組一樣的道理,以對象爲單位,比如VoStudent對象,包含兩個域String name和int age,那麼我們前端傳JSON格式的字符串數組對象就好了。DEMO:var argument = '[{"age":"1","name":"李四"},{"age":"2","name":"張三"}]';而後端接收使用@RequestBody List<VoStudent> voStudnetList 來接收數據;
實現方案1):
<script type="text/javascript">
//批量處理,inventoryListSubmit button id
$('#inventoryListSubmit').click(function(){
var studentArray= new Array();
studentArray.push({age: "1", name: "李四"});
studentArray.push({age: "2", name: "張三"});
$.ajax({
url: '${ctx}/abc/updateFormList',
type: 'POST',
data: $.toJSON(studentArray),
dataType:'json',
contentType:'application/json;charset=utf-8',
success: function (data) {
if(data.status){
$.Pro(data.info);
setTimeout("goBack()",1000);
}else{
$.Pro('網絡錯誤');
}
disabledBtn("#cancel");
},
error: function (data) {
console.log(data.status);
}
});
});
</script>
實現方案2):如果是表單的話是需要處理的,下面直接貼方法,函數serializeJson()可以直接用,嫌麻煩直接拿去用
//將表單序列化成json格式的數據(但不適用於含有控件的表單,例如複選框、多選的select)
(function($){
$.fn.serializeJson = function(){
var jsonData = {};
var serializeArray = this.serializeArray();
$(serializeArray).each(function () {
if (jsonData[this.name]) {
if ($.isArray(jsonData[this.name])) {
jsonData[this.name].push(this.value);
} else {
jsonData[this.name] = [jsonData[this.name], this.value];
}
} else {
jsonData[this.name] = this.value;
}
});
var vCount = 0;
for(var item in jsonData){
var tmp = $.isArray(jsonData[item]) ? jsonData[item].length : 1;
vCount = (tmp > vCount) ? tmp : vCount;
}
if(vCount > 1) {
var jsonData2 = new Array();
for(var i = 0; i < vCount; i++){
var jsonObj = {};
for(var item in jsonData) {
jsonObj[item] = jsonData[item][i];
}
jsonData2.push(jsonObj);
}
return JSON.stringify(jsonData2);
}else{
return "[" + JSON.stringify(jsonData) + "]";
}
};
})(jQuery);
//批量處理
$('#inventoryListSubmit').click(function(){
var data = $('#inventoryForm').serializeJson();
$.ajax({
url: '${ctx}/abc/updateInventoryFormList',
type: 'POST',
data: data,
dataType:'json',
contentType:'application/json;charset=utf-8',
success: function (data) {
if(data.status){
$.Pro(data.info);
setTimeout("goBack()",1000);
}else{
$.Pro('網絡錯誤');
}
disabledBtn("#cancel");
},
error: function (data) {
console.log(data.status);
}
});
});
後臺接收和上面demo一樣的!