動態數據與後臺交互的兩種方式

第一種方式： javabean: 1 public class BusLoanInfoShop { 2 private Integer id; 3 private Integer bid; 4 private String shopName; 5 private String platformNam ...

第一種方式：

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 }

javabean

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 }

ListForm

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 }

spring mvc訪問入口

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                                   &nbsp;&nbsp;<a href="#" onclick="delShopRow()">刪除一行</a> 
71                             </div>    
72                        </div>

html

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 }

javaScript

第二種方式：

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 }

spring Mvc訪問入口

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