• 动态数据与后台交互的两种方式


    第一种方式:

    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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="89px">
    28                                       </td>
    29                                       <td>
    30                                       <input  type="text" id="guaranterCard0"  name="guaranterCard0" style="89px">
    31                                       </td>
    32                                       <td>
    33                                       <input  type="text" id="guaranterEmployer0"  name="guaranterEmployer0" style="89px">
    34                                       </td>
    35                                       <td>
    36                                       <input  type="text" id="guaranterDuties0"  name="guaranterDuties0" style="89px">
    37                                       </td>
    38                                       <td>
    39                                       <input  type="text" id="guaranterPhone0"  name="guaranterPhone0" style="89px">
    40                                       </td>
    41                                       <td>
    42                                       <select  id="guaranterMaritalStatus0" name="guaranterMaritalStatus0" style="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="89px">
    53                                       </td>
    54                                       <td>
    55                                           <input  type="text" id="guaranterMonthlyIncome0"  name="guaranterMonthlyIncome0" style="89px">
    56                                       </td>
    57                                       <td>
    58                                           <input  type="text" id="guaranterValues0" name="guaranterValues0" style="89px">
    59                                       </td>
    60                                       <td>
    61                                           <input   type="text" id="guaranterTotalLiabilities0"  name="guaranterTotalLiabilities0" style="89px">
    62                                       </td>
    63                                   </tr>
    64                               </table>
    65                               <br />
    66                             <div style="text-align:center;">  
    67                                   <a href="#" onclick="addGuaranterRow()">添加一行</a>
    68                                    &nbsp;&nbsp;<a href="#" onclick="delGuaranterRow()">删除一行</a>   
    69                             </div>
    70                               
    71                        </div>
    html

    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 }
    javascript

    完,备忘用。

  • 相关阅读:
    HashMap源码分析——基于jdk1.7
    HashMap线程不安全的体现
    Java线程状态转换
    Java多线程——中断机制
    ThreadPoolExecutor解析
    Java中的CAS原理
    AQS框架源码分析-AbstractQueuedSynchronizer
    深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
    CSS布局 两列布局之单列定宽,单列自适应布局思路
    JavaScript 基本类型和引用类型
  • 原文地址:https://www.cnblogs.com/xuanaiwu/p/6057383.html
Copyright © 2020-2023  润新知