第一种 前台直接提交表单,后台封装
1步、页面 这是js写页面的一部分,主要是name
content += "<td><a href='javascript:void(0);' class='order-shop-thumb'><img src='<%=request.getContextPath()%>/images/system/goods/2.jpg'></a></td>"
+"<td><input type='hidden' name='products["+i+"].stockSku' class='h28-text w250' value='"+data[i].stockSku+"'>"+data[i].stockSku+"</td>"
+"<td><input type='text' name='products["+i+"].cnName' class='h28-text w250' value='"+data[i].cnName+"'></td>"
+"<td><input type='text' name='products["+i+"].enName' class='h28-text w250' value='"+data[i].enName+"'></td>"
+"</tr>";
2步、直接提交表单
3、后台接收
@RequestMapping("/saveBatchEditProductInfo")
@ResponseBody
public RequestResult<Object> saveBatchEditProductInfo(ProductModel products){}
4、封装模型
package com.sjdf.erp.facade.vo.product;
import java.util.List;
import com.sjdf.erp.facade.bean.product.PubProduct;
public class ProductModel {
private List<PubProduct> products;
public List<PubProduct> getProducts() {
return products;
}
public void setProducts(List<PubProduct> products) {
this.products = products;
}
}
第二种,在前台台,后台list接收
1步页面
declareContent += "<td><input type='hidden' name='stockSku' class='h28-text w250' value='"+data[i].stockSku+"'>"+data[i].stockSku+"</td>"
+"<td><input type='text' name='decCnName' class='h28-text w200' value='"+data[i].decCnName+"'></td>"
+"<td><input type='text' name='decEnName' class='h28-text w200' value='"+data[i].decEnName+"'></td>"
+"<td><input type='text' name='weight' class='h28-text w80' value='"+data[i].weight+"'></td>"
+"<td><button class='h28-table-btn editShopBtn'>应用给所有</button></td>"
+"</tr>";
2步 封装json
//批量修改商品名称后提交表单
function productBatchEditFormSubmit(formName){
var jsonArr = [];
$("#"+formName).find("tr").each(function(){
var json = {};
var flag = false;
$(this).find("[value]").each(function(){
flag = true;
json[$(this).attr("name")] = $(this).val();
});
if (flag) {
jsonArr.push(json);
}
});
console.debug(jsonArr);
jConfirm("确认保存!",function(){
$.postJSON("/product/saveBatchEditProductInfo",
jsonArr,
function(rs){
if(rs.code==0){
jSuccess(rs.msg)
}else {
jFail(rs.msg);
}
});
});
}
//下面这个是直接写在一个js文件中,只是做了一个封装,引入,直接可以用 $.postJSON()
/*
* 对jQuery类级别的的扩展。可以引入后可以直接用$.xxx()使用
*/
jQuery.extend({
/**
* 以JSON方式提交数据到服务端
* @param url 必需。规定把请求发送到哪个 URL。
* @param data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
* @param success 可选。请求成功时执行的回调函数。
* @param dataType 可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。
*/
postJSON:function(url, data, success, dataType) {
$.ajax({
type: "post",
url: url,
async: true,
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: success
});
}
});
//后台接收
@RequestMapping("/saveBatchEditProductInfo")
@ResponseBody
public RequestResult<Object> saveBatchEditProductInfo(@RequestBody List<PubProduct> products){