一個表單同時儲存多條記錄(通過ajax儲存)
阿新 • • 發佈:2019-02-04
例如上圖顯示的是一個商品列表,每個列表有兩個輸入框,可以單個儲存,也有批量儲存資料。批量儲存時,可以通過勾選按鈕獲取需要儲存的物件。
js程式碼如下(需要引用jquery.json.min.js):
var productArray = new Array();
// 校驗資料
for(var i = 0;i < ch_goods.length;i++){
if($(ch_goods[i]).prop("checked")){
var goods_id = $(ch_goods[i]).val();
var goods_info_stock = $(ch_goods[i]).parent("td").parent("tr").find("#goods_info_stock").find("input").val();
var manufacture_time = $(ch_goods[i]).parent("td").parent("tr").find("#manufacture_time").find("input").val();
productArray.push({goodsId: goods_id, manufactureTime: manufacture_time, goodsInfoStock: goods_info_stock});
}
}
// 批量儲存資料
$.ajax({
url: "batchSaveThirdGoodStorage.htm",
type: "POST",
contentType : 'application/json;charset=utf-8', //設定請求頭資訊
dataType:"json",
//data: JSON.stringify(productArray), //將Json物件序列化成Json字串,JSON.stringify()原生態方法
data: $.toJSON(productArray), //將Json物件序列化成Json字串,toJSON()需要引用jquery.json.min.js
success: function(data){
if(data){
window.location.reload();
}else{
$(".error_title").html("入庫失敗,請重新操作!");
$("#error-tip").modal('show');
}
},
error: function(res){
$(".show_title").text("入庫失敗,請重新操作!");
$("#select-tip").modal('show');
}
});
java後臺程式碼: