动态数据与后台交互的两种方式
第一种方式：
javabean:
1 public class BusLoanInfoShop { 2 private Integer id; 3 private Integer bid; 4 private String shopName; 5 private String platformName; 6 private String shopLevel; 7 private String operatingPeriod; 8 private String shopOwner; 9 private String subAccount; 10 private String sbuPassword; 11 private String businessOpera; 12 private String businessAddress; 13 private String warehouseAddress; 14 private String salesIncome; 15 private String totalLiability; 16 private String bankLiabilities; 17 private String netProfit; 18 19 public Integer getId() { 20 return id; 21 } 22 public void setId(Integer id) { 23 this.id = id; 24 } 25 public Integer getBid() { 26 return bid; 27 } 28 public void setBid(Integer bid) { 29 this.bid = bid; 30 } 31 public String getShopName(){ 32 return this.shopName; 33 } 34 public void setShopName(String shopName){ 35 this.shopName=shopName; 36 } 37 public String getPlatformName(){ 38 return this.platformName; 39 } 40 public void setPlatformName(String platformName){ 41 this.platformName=platformName; 42 } 43 public String getShopLevel(){ 44 return this.shopLevel; 45 } 46 public void setShopLevel(String shopLevel){ 47 this.shopLevel=shopLevel; 48 } 49 public String getOperatingPeriod(){ 50 return this.operatingPeriod; 51 } 52 public void setOperatingPeriod(String operatingPeriod){ 53 this.operatingPeriod=operatingPeriod; 54 } 55 public String getShopOwner(){ 56 return this.shopOwner; 57 } 58 public void setShopOwner(String shopOwner){ 59 this.shopOwner=shopOwner; 60 } 61 public String getSubAccount(){ 62 return this.subAccount; 63 } 64 public void setSubAccount(String subAccount){ 65 this.subAccount=subAccount; 66 } 67 public String getSbuPassword(){ 68 return this.sbuPassword; 69 } 70 public void setSbuPassword(String sbuPassword){ 71 this.sbuPassword=sbuPassword; 72 } 73 public String getBusinessOpera(){ 74 return this.businessOpera; 75 } 76 public void setBusinessOpera(String businessOpera){ 77 this.businessOpera=businessOpera; 78 } 79 public String getBusinessAddress(){ 80 return this.businessAddress; 81 } 82 public void setBusinessAddress(String businessAddress){ 83 this.businessAddress=businessAddress; 84 } 85 public String getWarehouseAddress(){ 86 return this.warehouseAddress; 87 } 88 public void setWarehouseAddress(String warehouseAddress){ 89 this.warehouseAddress=warehouseAddress; 90 } 91 public String getSalesIncome(){ 92 return this.salesIncome; 93 } 94 public void setSalesIncome(String salesIncome){ 95 this.salesIncome=salesIncome; 96 } 97 public String getTotalLiability(){ 98 return this.totalLiability; 99 } 100 public void setTotalLiability(String totalLiability){ 101 this.totalLiability=totalLiability; 102 } 103 public String getBankLiabilities(){ 104 return this.bankLiabilities; 105 } 106 public void setBankLiabilities(String bankLiabilities){ 107 this.bankLiabilities=bankLiabilities; 108 } 109 public String getNetProfit(){ 110 return this.netProfit; 111 } 112 public void setNetProfit(String netProfit){ 113 this.netProfit=netProfit; 114 } 115 116 }
ListForm:
1 public class ShopListForm { 2 private List<BusLoanInfoShop> shop; 3 4 public List<BusLoanInfoShop> getShop() { 5 return shop; 6 } 7 8 public void setShop(List<BusLoanInfoShop> shop) { 9 this.shop = shop; 10 } 11 12 13 14 }
spring Mvc控制器入口：
1 @RequestMapping("/save") 2 public void save(ShopListForm shopForm,HttpServletResponse response) throws Exception{ 3 for(BusLoanInfoShop shop:shopForm.getShop()){ 4 System.out.println("shop.name="+shop.getShopName()); 5 } 6 7 }
html代码：
1 <div id="optionContainer" class="ftitle">经验实体信息(必填，多个网商店铺需加行)</div> 2 <div class="fitem"> 3 <table id="tblShopData"> 4 <tr> 5 <td>网店名称</td> 6 <td>电商平台名称</td> 7 <td>网店级别（仅限淘宝及天猫商户）</td> 8 <td>网店持续经营年限</td> 9 <td>网店实际所有者（个人名称或公司名称)</td> 10 <td>子帐号</td> 11 <td>密码</td> 12 <td>主要产品、品牌</td> 13 <td>经营地址</td> 14 <td>仓库地址</td> 15 <td>上年度销售</td> 16 <td>总负债</td> 17 <td>银行负债</td> 18 <td>上年度净利润</td> 19 </tr> 20 <tr id="tShopRow0"> 21 <td> 22 <input id="shop[0].shopName" class="easyui-validatebox" name="shop[0].shopName" style="width:59px" data-options="required:true,validType:'length[1,200]'"> 23 </td> 24 <td> 25 <input id="shop[0].platformName" class="easyui-validatebox" name="shop[0].platformName" style="width:59px" data-options="required:true,validType:'length[1,200]'"> 26 </td> 27 <td> 28 <input id="shop[0].shopLevel" class="easyui-validatebox" name="shop[0].shopLevel" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 29 </td> 30 <td> 31 <input id="shop[0].operatingPeriod0" class="easyui-validatebox" name="shop[0].operatingPeriod" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 32 </td> 33 <td> 34 <input id="shop[0].shopOwner" class="easyui-validatebox" name="shop[0].shopOwner" style="width:59px" data-options="required:true,validType:'length[1,200]'"> 35 </td> 36 <td> 37 <input id="shop[0].subAccount" class="easyui-validatebox" name="shop[0].subAccount" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 38 </td> 39 <td> 40 <input id="shop[0].sbuPassword" class="easyui-validatebox" name="shop[0].sbuPassword" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 41 </td> 42 <td> 43 <input id="shop[0].businessOpera" class="easyui-validatebox" name="shop[0].businessOpera" style="width:59px" data-options="required:true,validType:'length[1,300]'"> 44 </td> 45 <td> 46 <input id="shop[0].businessAddress" class="easyui-validatebox" name="shop[0].businessAddress" style="width:59px" data-options="required:true,validType:'length[1,300]'"> 47 </td> 48 <td> 49 <input id="shop[0].warehouseAddress" class="easyui-validatebox" name="shop[0].warehouseAddress" style="width:59px" data-options="required:true,validType:'length[1,300]'"> 50 </td> 51 52 <td> 53 <input id="shop[0].salesIncome" class="easyui-validatebox" name="shop[0].salesIncome0" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 54 </td> 55 <td> 56 <input id="shop[0].totalLiability" class="easyui-validatebox" name="shop[0].totalLiability" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 57 </td> 58 <td> 59 <input id="shop[0].bankLiabilities" class="easyui-validatebox" name="shop[0].bankLiabilities" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 60 </td> 61 <td> 62 <input id="shop[0].netProfit" class="easyui-validatebox" name="shop[0].netProfit" style="width:59px" data-options="required:true,validType:'length[1,100]'"> 63 </td> 64 65 </tr> 66 </table> 67 <br /> 68 <div style="text-align:center;"> 69 <a href="#" onclick="addShopRow()">添加一行</a> 70 <a href="#" onclick="delShopRow()">删除一行</a> 71 </div> 72 </div>
js代码：
1 //添加行 2 function addShopRow(){ 3 var num=$("#rowCount").val();//取值 4 num=parseInt(num); 5 num++; 6 $("#tShopRow0").clone(true).attr("id","tShopRow"+num).appendTo("#tblShopData"); 7 $("#tShopRow"+num+" td").each(function(){ 8 $(this).find("input[type='text']").val("");//清空数据 9 $(this).find("input[name='shop[0].shopName']").attr("id","shop['"+num+"'].shopName").attr("name","shop['"+num+"'].shopName"); 10 $(this).find("input[name='shop[0].platformName']").attr("id","shop['"+num+"'].platformName").attr("name","shop['"+num+"'].platformName"); 11 $(this).find("input[name='shop[0].shopLevel']").attr("id","shop['"+num+"'].shopLevel").attr("name","shop['"+num+"'].shopLevel"); 12 $(this).find("input[name='shop[0].operatingPeriod']").attr("id","shop['"+num+"'].operatingPeriod").attr("name","shop['"+num+"'].operatingPeriod"); 13 $(this).find("input[name='shop[0].shopOwner']").attr("id","shop['"+num+"'].shopOwner").attr("name","shop['"+num+"'].shopOwner"); 14 $(this).find("input[name='shop[0].subAccount']").attr("id","shop['"+num+"'].subAccount").attr("name","shop['"+num+"'].subAccount"); 15 $(this).find("input[name='shop[0].sbuPassword']").attr("id","shop['"+num+"'].sbuPassword").attr("name","shop['"+num+"'].sbuPassword"); 16 $(this).find("input[name='shop[0].businessOpera']").attr("id","shop['"+num+"'].businessOpera").attr("name","shop['"+num+"'].businessOpera"); 17 $(this).find("input[name='shop[0].businessAddress']").attr("id","shop['"+num+"'].businessAddress").attr("name","shop['"+num+"'].businessAddress"); 18 $(this).find("input[name='shop[0].warehouseAddress']").attr("id","shop['"+num+"'].warehouseAddress").attr("name","shop['"+num+"'].warehouseAddress"); 19 $(this).find("input[name='shop[0].salesIncome']").attr("id","shop['"+num+"'].salesIncome").attr("name","shop['"+num+"'].salesIncome"); 20 $(this).find("input[name='shop[0].totalLiability']").attr("id","shop['"+num+"'].totalLiability").attr("name","shop['"+num+"'].totalLiability"); 21 $(this).find("input[name='shop[0].bankLiabilities']").attr("id","shop['"+num+"'].bankLiabilities").attr("name","shop['"+num+"'].bankLiabilities"); 22 $(this).find("input[name='shop[0].netProfit']").attr("id","shop['"+num+"'].netProfit").attr("name","shop['"+num+"'].netProfit"); 23 }); 24 $('#rowCount').val(num);//重新赋值 25 } 26 //删除行 27 function delShopRow(){ 28 var num=$("#rowCount").val();//取值 29 num=parseInt(num); 30 if(num>0){ 31 $("#tShopRow"+num).remove(); 32 num--; 33 $('#rowCount').val(num);//重新赋值 34 }else{ 35 alert("这是第一行了！"); 36 } 37 38 }
第二种方式：
spring Mvc控制器入口：
1 public void save(HttpServletRequest request,HttpServletResponse response) throws Exception{ 2 BusLoanInfoGuaranter busLoanInfoGuaranter=new BusLoanInfoGuaranter(); 3 busLoanInfoGuaranter.setBid(busLoanInfo.getId()); 4 busLoanInfoGuaranter.setGuaranterName(request.getParameter("guaranterName"+i)); 5 busLoanInfoGuaranter.setGuaranterCard(request.getParameter("guaranterCard"+i)); 6 busLoanInfoGuaranter.setGuaranterEmployer(request.getParameter("guaranterEmployer"+i)); 7 busLoanInfoGuaranter.setGuaranterDuties(request.getParameter("guaranterDuties"+i)); 8 busLoanInfoGuaranter.setGuaranterPhone(request.getParameter("guaranterPhone"+i)); 9 busLoanInfoGuaranter.setGuaranterMaritalStatus(request.getParameter("guaranterMaritalStatus"+i)); 10 busLoanInfoGuaranter.setGuaranterHouseAddress(request.getParameter("guaranterHouseAddress"+i)); 11 busLoanInfoGuaranter.setGuaranterMonthlyIncome(request.getParameter("guaranterMonthlyIncome"+i)); 12 busLoanInfoGuaranter.setGuaranterValues(request.getParameter("guaranterValues"+i)); 13 busLoanInfoGuaranter.setGuaranterTotalLiabilities(request.getParameter("guaranterTotalLiabilities"+i)); 14 }
htm代码：
1 <div class="ftitle">是否提供自然人保证，是就填写下面信息</div> 2 <div class="fitem"> 3 <label class="ui-label">是否提供自然人保证：</label><select class="easyui-combobox" name="ifGuaranter" style="width:139px"> 4 <option value=""></option> 5 <option value="是">是</option> 6 <option value="否">否</option> 7 </select> 8 </div> 9 10 <div class="ftitle">保证人信息</div> 11 <div class="fitem"> 12 <table id="tblData"> 13 <tr> 14 <td>保证人姓名</td> 15 <td>证件号码</td> 16 <td>工作单位</td> 17 <td>职务</td> 18 <td>联系电话</td> 19 <td>婚姻状况</td> 20 <td>家庭地址</td> 21 <td>月收入情况</td> 22 <td>资产总额</td> 23 <td>负债总额</td> 24 </tr> 25 <tr id="tRow0"> 26 <td> 27 <input type="text" id="guaranterName0" name="guaranterName0" style="width:89px"> 28 </td> 29 <td> 30 <input type="text" id="guaranterCard0" name="guaranterCard0" style="width:89px"> 31 </td> 32 <td> 33 <input type="text" id="guaranterEmployer0" name="guaranterEmployer0" style="width:89px"> 34 </td> 35 <td> 36 <input type="text" id="guaranterDuties0" name="guaranterDuties0" style="width:89px"> 37 </td> 38 <td> 39 <input type="text" id="guaranterPhone0" name="guaranterPhone0" style="width:89px"> 40 </td> 41 <td> 42 <select id="guaranterMaritalStatus0" name="guaranterMaritalStatus0" style="width:89px"> 43 <option value=""></option> 44 <option value="已婚">已婚</option> 45 <option value="未婚">未婚</option> 46 <option value="离异">离异</option> 47 <option value="丧偶">丧偶</option> 48 <option value="其他">其他</option> 49 </select> 50 </td> 51 <td> 52 <input type="text" id="guaranterHouseAddress0" name="guaranterHouseAddress0" style="width:89px"> 53 </td> 54 <td> 55 <input type="text" id="guaranterMonthlyIncome0" name="guaranterMonthlyIncome0" style="width:89px"> 56 </td> 57 <td> 58 <input type="text" id="guaranterValues0" name="guaranterValues0" style="width:89px"> 59 </td> 60 <td> 61 <input type="text" id="guaranterTotalLiabilities0" name="guaranterTotalLiabilities0" style="width:89px"> 62 </td> 63 </tr> 64 </table> 65 <br /> 66 <div style="text-align:center;"> 67 <a href="#" onclick="addGuaranterRow()">添加一行</a> 68 <a href="#" onclick="delGuaranterRow()">删除一行</a> 69 </div> 70 71 </div>
js代码：
1 //保证人添加行 2 function addGuaranterRow(){ 3 var num=$("#guaranterRowCount").val(); 4 num=parseInt(num); 5 num++;//点击自加 6 $("#tRow0").clone(true).attr("id","tRow"+num).appendTo("#tblData"); 7 $("#tRow"+num+" td").each(function(){ 8 $(this).find("input[type='text']").val("");//清空数据 9 $(this).find("input[name='guaranterName0']").attr("id","guaranterName"+num).attr("name","guaranterName"+num); 10 $(this).find("input[name='guaranterCard0']").attr("id","guaranterCard"+num).attr("name","guaranterCard"+num); 11 $(this).find("input[name='guaranterEmployer0']").attr("id","guaranterEmployer"+num).attr("name","guaranterEmployer"+num); 12 $(this).find("input[name='guaranterDuties0']").attr("id","guaranterDuties"+num).attr("name","guaranterDuties"+num); 13 $(this).find("input[name='guaranterPhone0']").attr("id","guaranterPhone"+num).attr("name","guaranterPhone"+num); 14 $(this).find("input[name='guaranterMaritalStatus0']").attr("id","guaranterMaritalStatus"+num).attr("name","guaranterMaritalStatus"+num); 15 $(this).find("input[name='guaranterHouseAddress0']").attr("id","guaranterHouseAddress"+num).attr("name","guaranterHouseAddress"+num); 16 $(this).find("input[name='guaranterMonthlyIncome0']").attr("id","guaranterMonthlyIncome"+num).attr("name","guaranterMonthlyIncome"+num); 17 $(this).find("input[name='guaranterValues0']").attr("id","guaranterValues"+num).attr("name","guaranterValues"+num); 18 $(this).find("input[name='guaranterTotalLiabilities0']").attr("id","guaranterTotalLiabilities"+num).attr("name","guaranterTotalLiabilities"+num); 19 }); 20 $("#guaranterRowCount").val(num);//重新赋值 21 } 22 //保证人删除行 23 function delGuaranterRow(){ 24 var num=$("#guaranterRowCount").val(); 25 num=parseInt(num); 26 if(num>0){//判断是不是第一行 27 $("#tRow"+num).remove(); 28 num--;//删除后要自减 29 $('#guaranterRowCount').val(num);//重新赋值 30 }else{ 31 alert("这是第一行了！"); 32 } 33 }
完，备忘用。
