如何应对面临批量数据时如何提交给后台

方式1：

使用JSON格式

后台功能接受实现使用@ResponseBody

前端当有多行数据的时候添加到一个数组再通过JSON格式到后台List接收

@RequestMapping(value = "/emp01",method = RequestMethod.POST, produces = "application/json")

    @ResponseBody

    public String empAdd02(@RequestBody List<Employee> list){

        for (Employee e: list) {

            employeeMapper.insert(e);

        }

        return  "{\"msg\":\"succeed\"}";

    }

该参数为一个员工对象集合

以下是前端：

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

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>

<head>

    <title>批量添加员工</title>

    <style type="text/css">

        .tab{

            text-align: center;

            height: 40px;

            line-height: 40px;

        }

        .tab{

            background-color: #F8F8F8;

        }

    </style>

</head>

<body>

mar

    <table >

        <thead>

        <tr>

            <th>编号</th><th>姓名</th><th>性别</th><th>学历</th><th>月薪</th><th>添加</th><th>移除</th>

        </tr>

        </thead>

        <tbody id="tbody01">

        <tr>

            <td><input type="text" name="number"/></td>

            <td><input type="text" name="empName"/></td>

            <td>

                <select name="empSex">

                <option>请选择</option>

                    <option value="男">男</option>

                    <option value="女">女</option>

                </select>

            </td>

            <td>

                <select name="education">

                    <option>请选择</option>

                    <option value="本科">本科</option>

                    <option value="专科">专科</option>

                    <option value="硕士">硕士</option>

                    <option value="博士">博士</option>

                </select>

            </td>

            <td><input type="number" name="monthly"/></td>

            <td><input type="button" value="+" class="empAdd"/></td>

            <td><input type="button" value="-" class="empRem"/></td>

        </tr>

        </tbody>

    </table>

    <input type="button" id="addAll" value="批量添加" style="display: block;width: 100px;height: 40px; margin: 0 auto" />

    <table class="tab" border="1" align="center" width="60%" bordercolor="#E2E2E2">

    <tr class="th">

        <th>编号</th><th>姓名</th><th>性别</th><th>学历</th><th>月薪</th>

    </tr>

    <c:forEach var="emp" items="${emps}">

        <tr>

            <td>${emp.number}</td>

            <td>${emp.empName}</td>

            <td>${emp.empSex}</td>

            <td>${emp.education}</td>

            <td>${emp.monthly}</td>

        </tr>

    </c:forEach>

</table>

</body>

<script src="../../js/jquery.js"></script>

<script type="text/javascript">

    $(function () {

        var tbody = $("#tbody01");

        trNode = tbody.clone();

        tbody.on("click", " .empAdd", function () {

            $("#tbody01").append(trNode.clone());

        });

        tbody.on("click",".empRem",function () {

           var num = $("tr",tbody).length;

           if( num === 1){

               alert("最后一行不能删除");

               return false;

           }

           $(this).parent().parent().remove();

        });

    });

    /*数组*/

   $("#addAll").click(function(){

        var list = [];

        $("#tbody01 tr").each(function (i,obj) {

            list.push(

                {

                    number:$("input[name=number]",obj).val(),

                    empName:$("input[name=empName]",obj).val(),

                    empSex:$("select[name=empSex]",obj).val(),

                    education:$("select[name=education]",obj).val(),

                    monthly:$("input[name=monthly]",obj).val()

                }

            );

        });

        console.log(list);

        $.post({

            url:"/emp01",

            contentType:"application/json;charset=utf-8",

            data:JSON.stringify(list)

        }).done(function (data) {

            if(data.msg === "succeed"){

                window.location.href = "/eee";

            }

        });

   });

</script>

</html>

方式2：

传统的form表单

此时使用form表单的话如有多个tr的批量数据

后台的话就需要借助一定集合类来实现了

package com.dz147.entity;

import java.util.List;

public class EmpList {

    public List<Employee> addEmp;

    @Override

    public String toString() {

        return "EmpList{" +

                "addEmp=" + addEmp +

                '}';

    }

    public List<Employee> getAddEmp() {

        return addEmp;

    }

    public void setAddEmp(List<Employee> addEmp) {

        this.addEmp = addEmp;

    }

}

里面是个员工集合字段做为存储批量数据的作用

通过form表单POST方法提交到controller

方法第二参数为集合类对象

 @RequestMapping(value = "/empAdd", method = RequestMethod.POST)

    public String empAdd(Model model,EmpList empList){

        for (Employee emp:empList.addEmp) {

            employeeMapper.insert(emp);

        }

        return "redirect:/emp";

    }

通过对象得到List集合对象

循环取出单个对象再往数据库添加

前端如何实现对集合对象赋值呢

表单的name 通过addEmp[0].id(通过存储对象[0]表示第一个对象点某个字段)

EmpList 类相当于中转站一样存储对象。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>

<head>

    <title>批量添加员工</title>

    <style type="text/css">

        table tr{

            text-align: center;

            height: 40px;

            line-height: 40px;

        }

        table tr:hover{

            background-color: #F8F8F8;

        }

    </style>

</head>

<body>

<form action="/empAdd" method="post">

    <table border="0px" align="center" width="60%" bordercolor="#E2E2E2" id="emps_table">

        <thead>

        <tr>

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>学历</th>

            <th>月薪</th>

            <th>添加</th>

            <th>移除</th>

        </tr>

        </thead>

        <tbody id="tbody01">

        <tr>

            <td><input type="text" name="addEmp[0].number"/></td>

            <td><input type="text" name="addEmp[0].empName"/></td>

            <td>

                <select name="addEmp[0].empSex">

                <option>请选择</option>

                    <option value="男">男</option>

                    <option value="女">女</option>

                </select>

            </td>

            <td>

                <select name="addEmp[0].education">

                    <option>请选择</option>

                    <option value="本科">本科</option>

                    <option value="专科">专科</option>

                    <option value="硕士">硕士</option>

                    <option value="博士">博士</option>

                </select>

            </td>

            <td><input type="number" name="addEmp[0].monthly"/></td>

            <td><input type="button" value="+" onclick="add()"/></td>

            <td><input type="button" value="-"/></td>

        </tr>

        </tbody>

    </table>

    <input type="submit" value="批量添加" style="display: block;width: 100px;height: 40px; margin: 0 auto" />

</form>

<table border="1" align="center" width="60%" bordercolor="#E2E2E2">

    <tr class="th">

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>学历</th>

        <th>月薪</th>

    </tr>

    <c:forEach var="emp" items="${emps}">

        <tr>

            <td>${emp.number}</td>

            <td>${emp.empName}</td>

            <td>${emp.empSex}</td>

            <td>${emp.education}</td>

            <td>${emp.monthly}</td>

        </tr>

    </c:forEach>

</table>

</body>

<script src="../js/jquery-1.12.3.min.js"></script>

<script type="text/javascript">

    /*数组*/

    var i=0;

    function add(){

        i++;

        var t="<tr><td><input type='text' name='addEmp["+i+"].number'/>" +

            "</td><td><input type='text' name='addEmp["+i+"].empName'/>" +

            "</td><td><select name='addEmp["+i+"].empSex'><option value='本科'>请选择</option>" +

            "<option value='男'>男</option>" +

            "<option value='女'>女</option></select></td>" +

            "<td><select name='addEmp["+i+"].education'> <option value='本科'>请选择</option>" +

            "<option value='专科'>专科</option>" +

            "<option value='硕士'>硕士</option>" +

            "<option value='博士'>博士</option></select></td>" +

            "<td><input type='number' name='addEmp["+i+"].monthly'/></td>" +

            "<td><input type='button' value='+' onclick='add()'/></td>" +

            "<td><input type='button' value='-' onclick='rem(this)'/></td></tr>";

        var table=document.getElementById("emps_table").innerHTML;

        table+=t;

        document.getElementById("emps_table").innerHTML=table;

    }

    function rem(obj){

        if (i>0){

            i--;

            obj.parentElement.parentElement.remove();

        } else{

            alert("不能再移除了！")

        }

    }

</script>

</html>

SSM批量添加数据的更多相关文章

  1. EF批量添加数据性能慢的问题的解决方案

    //EF批量添加数据性能慢的问题的解决方案 public ActionResult BatchAdd() { using (var db = new ToneRoad.CEA.DbContext.Db ...

  2. .Net中批量添加数据的几种实现方法比较

    在.Net中经常会遇到批量添加数据,如将Excel中的数据导入数据库,直接在DataGridView控件中添加数据再保存到数据库等等. 方法一:一条一条循环添加 通常我们的第一反应是采用for或for ...

  3. ThinkPHP批量添加数据和getField()示例

    批量添加数据 // 批量添加数据 $User = M('users'); $dataList[] = array('name'=>'thinkphp','email'=>'thinkphp ...

  4. thinkphp3.2 批量添加数据

    这是我遇到的thinkphp3.2 当中最让我无语的坑 批量添加数据有个方法是 addAll() 这个方法一定要注意数组的键名,一定要整齐!!! 可以在存入数据前,用ksort()方法将数组的键名排序 ...

  5. spring boot之使用通用Mapper批量添加数据

    通用Mapper是一款针对mybatis进行扩展的轻量级组件,使用起来非常方便.当调用其针对mysql进行批量添加数据的方法时,发现报错,仔细研究了一番,发现是在使用通用Mapper上出现了问题.下面 ...

  6. Yii2如何批量添加数据

    批量添加这个操作,在实际开发中经常用得到,今天小编抽空给大家整理些有关yii2批量添加的问题,感兴趣的朋友一起看看吧. 在上篇文章给大家介绍了关于浅析Yii2 gridview实现批量删除教程,当然, ...

  7. ADO.NET- 中批量添加数据的几种实现方法比较

    在.Net中经常会遇到批量添加数据,如将Excel中的数据导入数据库,直接在DataGridView控件中添加数据再保存到数据库等等. 方法一:一条一条循环添加 通常我们的第一反应是采用for或for ...

  8. Java使用Mysql数据库实现批量添加数据

    EmployeeDao.java //批处理添加数据 public int saveEmploeeBatch(){ int row = 0; try{ con = DBCon.getConn(); S ...

  9. java操作elasticsearch实现批量添加数据（bulk）

    java操作elasticsearch实现批量添加主要使用了bulk 代码如下: //bulk批量操作(批量添加) @Test public void test7() throws IOExcepti ...

随机推荐

  1. Samba服务器配置案例

      一.项目背景 某公司有system.develop.productdesign和test等4个小组,个人办公机操作系统为Windows 2000/XP/2003,少数开发人员采用Linux操作系统 ...

  2. jenkins 配置主从机制（master-slaver）

    1. 中文:系统管理——节点管理——新建节点(左上侧) 英文:Manage Jenkins——Manage Node——新建节点(左上侧) 2. 中文配图 英文配图: 3. 远程工作目录 以mac为例 ...

  3. C语言根据结构体成员变量的地址，得到结构体的地址

    看nginx代码时发现双链表使用的是这种方法,记录一下 给出一个实例来说明 struct father_t {    int a;    char *b;    double c;}f;char *p ...

  4. solr 中文分词相关（转载）

    smartcn和ik的对比,来自http://www.cnblogs.com/hadoopdev/p/3465556.html 一.引言: 年的时候,就曾经有项目涉及到相关的应用(Lunce构建全文搜 ...

  5. P5357 【模板】AC自动机（二次加强版）

    思路 这题可以同时作为AC自动机和SAM的模板啊喂 AC自动机 对T建出AC自动机,把S在上面匹配,然后记录每个点被经过的次数,最后统计一次即可(暴力跳fail的复杂度是不对的) SAM 对S建出SA ...

  6. USC-- compute shader ps vs

    http://cdn.imgtec.com/sdk-documentation/PowerVR%20Compute%20Development%20Recommendations.pdf powerV ...

  7. git 解决 error: failed to push some refs to 'https://github.com/xxxx.git'

    在github远程创建仓库后, 利用gitbash进行提交本地文件的时候出现如下错误 [root@foundation38 demo]# git push -u origin master Usern ...

  8. svn 跟 git的区别

    1.svn是集中式版本控制系统,git是分布式版本控制系统 2.svn是直接与服务器进行交互,git是将文件存到本地然后再推送到服务器 3.svn必须在连网的情况下工作,git可以不连网开发 4.sv ...

  9. HDU 6088 - Rikka with Rock-paper-scissors | 2017 Multi-University Training Contest 5

    思路和任意模数FFT模板都来自 这里 看了一晚上那篇<再探快速傅里叶变换>还是懵得不行,可能水平还没到- - 只能先存个模板了,这题单模数NTT跑了5.9s,没敢写三模数NTT,可能姿势太 ...

  10. java.util.Queue

    转载于:https://www.runoob.com/java/data-queue.html 队列是一种特殊的线性表,它只允许在表的前端进行删除操作,而在表的后端进行插入操作. LinkedList ...