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

方式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. Django_05_模板

    模板 如何向请求者返回一个漂亮的页面呢?肯定需要用到html.css,如果想要更炫的效果还要加入js,问题来了,这么一堆字段串全都写到视图中,作为HttpResponse()的参数吗?这样定义就太麻烦 ...

  2. python错误大全

    1.NameError:name 'Ture' is not defined 这个是名字没有定义,也可能写错了 while True: 2.IndentationError: unindent doe ...

  3. Matlab---绘制柱状图

    Matlab---绘制柱状图 目录: hist()函数 histc( )函数 bar()函数 正文: 注意区分:频率.频数分布直方图. 一.             hist()函数 hist():实 ...

  4. 美团面经-java开发

     美团(1)1 1 2 3 5 8...,求第n项写了个递归,面试官问了两个,n＝-1,和极限最大值情况下怎么办.我回答,会导致栈的内存空间溢出.又问了,在栈里会是个怎样的过程.(2)打开摩拜单车页面 ...

  5. async 与 await

    async 关键字 1.含义:表示函数是一个异步函数,意味着该函数的执行不会阻塞后面代码的执行 2.定义与调用 async function hello (flag) { if (flag) { re ...

  6. 红米k30评测+全面解读

    暂时还没有图片等页面美化..其实网上有很多美图,这里不再粘贴了 红米k30是小米公司子品牌红米最近推出的一款性价比非常高的手机,以下进行多方面解读: 本人会尽量用不懂手机都能理解的语言来各方面讲解k3 ...

  7. 虚拟机里的nginx启动不了的问题

    问题:  之前使用虚拟机nginx一直都是正常的, 就在昨天重新配置了一下nginx(其实只注释了反向代理,别的都没动), 重启nginx, 却报错pid为空. 无法启动nginx.   而且重启之前 ...

  8. parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。

    parent([expr]) 概述 取得一个包含着所有匹配元素的唯一父元素的元素集合.大理石构件 你可以使用可选的表达式来筛选. 参数 exprStringV1.0 用来筛选的表达式 示例 描述: 查 ...

  9. vue 源码解析computed

    计算属性 VS 侦听属性 Vue 的组件对象支持了计算属性 computed 和侦听属性 watch 2 个选项,很多同学不了解什么时候该用 computed 什么时候该用 watch.先不回答这个问 ...

  10. CSS3-弹性盒布局(Flex Box)

    弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...