加入收藏 | 设为首页 | 会员中心 | 我要投稿 焦作站长网 (https://www.0391zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 酷站推荐 > 酷站 > 正文

springmvc 结合ajax批量新增的实现方法

发布时间:2020-11-25 13:32:29 所属栏目:酷站 来源:互联网
导读:这篇文章主要介绍了springmvc 结合ajax批量新增的实现方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以

mvc框架的处理日期问题

@ResponseBody响应对象是自定义对象,响应不是json

@ResopnseBody响应自定义对象时,日期为是long类型的数

结束数据方法的参数,该如何定义?接收多个对象?

2. 页面代码

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax批量新增操作</title>


<script type="text/javascript" src="http://www.admin5.com/article/20201125/js/jquery-3.4.1.js"></script>

</head>

<body>


 <form>
  <table >
   <tr>
    <td>姓名</td>
    <td>身份证</td>
    <td>时间</td>
    <td>direction</td>
    <td>type</td>
    <td>操作</td>
   </tr>
   
   <tbody>
    <tr>
     <td>
      <!-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。 -->
      <input type="text"/>
     </td>
     
     <td>
      <input type="text"/>
     </td>
    

<td>
      <input type="date"/>
     </td>
     
     <td>
      <input type="radio" value="1"/>进入
      <input type="radio" value="2"/>离开
     </td>     
     
     <td>
      <input type="radio" value="1"/> 内部
      <input type="radio" value="2"/> 外部
     </td>
     
     <td>
      <input type="button" value="移除">
     </td>          
     
    </tr>
   </tbody>
   
   <tr>
    <td colspan="6">
     <input type="button" value="新增visitor" />
     <input type="button" value="保存"/>
    </td>
   </tr>
   
  </table>
 </form>
 
 
 <script>
  $(function() {
   var index_val = 0;
  
   
   $("body").on('click', '.remove', function() {
    // 移除当前行, 通过父级来绑定...
    // $(this).parent().parent().remove();
    
    $("#tbody tr").remove();
    
    // 覆盖,生成行
    if (index_val > 0) {
     var data_str = "";
     for (var i = 0; i < index_val; i++) {
      
      data_str +=
       "<tr>" +
        "<td>" +
        " <input type='text'/>" +
        "</td>" +  
           
        "<td>" +  
        " <input type='text'/>" +
        "</td>" +  
          
        "<td>" +  
        " <input type='date'/>" +
        "</td>" +
       
        "<td>" +
        " <input type='radio' value='1'/>进入" +
        " <input type='radio' value='2'/>离开" +
        "</td>" +     
       
        "<td>" +      
        " <input type='radio' value='1'/> 内部" +
        " <input type='radio' value='2'/> 外部" +
        "</td>" +
     
        "<td>" +
        " <input type='button' value='移除'>" +
        "</td>" +          
        
       "</tr>";      
     }
     $("#tbody").append(data_str);
    }
    
    // 把下标减少一 就行了,就是移除了。
    index_val --;
    
    console.log("remove: ", index_val);
   });
   
   $("#add").click(function() {
    
    // 自增1
    index_val ++;
    
    var data_str =
     "<tr>" +
      "<td>" +
      " <input type='text'/>" +
      "</td>" +  
         
      "<td>" +  
      " <input type='text'/>" +
      "</td>" +  
        
      "<td>" +  
      " <input type='date'/>" +
      "</td>" +
     
      "<td>" +
      " <input type='radio' value='1'/>进入" +
      " <input type='radio' value='2'/>离开" +
      "</td>" +     
     
      "<td>" +      
      " <input type='radio' value='1'/> 内部" +
      " <input type='radio' value='2'/> 外部" +
      "</td>" +
   
      "<td>" +
      " <input type='button' value='移除'>" +
      "</td>" +          
      
     "</tr>";     
    
    $("#tbody").append(data_str);
    
    console.log("add==>" + index_val);
   });
   
   $("#save").click(function() {
    var form_data = $("#myForm").serialize();
    
    // console.log(form_data)
    
    $.ajax({
     url: "visitor/batchAdd",
     type: "post",
     data: form_data,
     success: function(data) {
      console.log(data);
     },
     error: function(e) {
      console.log(e);
     }
    });
   });
  });
 </script>
 
</body>
</html>

js学得terrible… 能够移除,我的移除是先移除所有的行,重新生成行,比较之前生成的行,少一行。

3. controller定义参数接收

批量新增实体类BatchVisitor ,定义集合接收多个对象

package cn.bitqian.entity;

import java.util.ArrayList;
import java.util.List;

(编辑:焦作站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读