第一种方式：(使用ajax的方式)

前端代码：

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

<html>

<head>

    <title>Title</title>

</head>

<body>

<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>

<table>

    <thead>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>学历</th>

        <th>增加</th>

        <th>移除</th>

    </thead>

    <tbody id="data1">

        <tr>

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

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

            <td>

                <select name="empSex">

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

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

                </select>

            </td>

            <td>

                <select name="eduEducation">

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

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

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

                </select>

            </td>

            <td><input type="button" onclick="addElement(this);" value="+"></td>

            <td><input type="button" value="-" onclick="delElement(this)"></td>

        </tr>

    </tbody>

</table>

<p><input type="button" id="btn_add" value="批量添加"></p>

</body>

<script>

    //批量添加

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

        var data=[];

        //循环tbody里面所有的tr，并取出每行相对的值,填充到数组中

        $("#data1 tr").each(function (index,obj) {

            data.push({

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

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

                empSexual:$("select[name='empSexual'] option:selected",obj).val(),

                eduEducation:$("select[name='eduEducation'] option:selected",obj).val()

            })

        })

        //发起post请求

        $.post({

            url:"",

            contentType:"application/json",

            data:JSON.stringify(data),//将对象转为字符

            success:function (text) {

                alert(text.msg);

            }

        });

    })

    //复制tr节点的内容

    function addElement(x){

        $(x).parents("tr").clone().appendTo($("#data1"));

    }

    //移除tr节点

    function delElement(x){

        $(x).parents("tr").remove();

    }

</script>

</html>

后端代码：

    //访问test页面

    @RequestMapping(path="/c",method = RequestMethod.GET)

    public String test1(){

        return "test1";

    }

    //接收test页面的字符数组

    @RequestMapping(path = "/c",method = RequestMethod.POST,produces = "application/json;charset=utf-8")

    @ResponseBody

    public String Receive(@RequestBody List<Employee> list){  //Employee可以改为Object

        for (Employee employee : list) {

            System.out.println(employee);

        }

        return "{\"msg\":\"添加成功\"}";

    }

实体类

package com.oukele.model;

import java.math.BigDecimal;

public class Employee {

    private String empId;

    private String empName;

    private String empSexual;

    private String eduEducation;

    public String getEmpId() {

        return empId;

    }

    public void setEmpId(String empId) {

        this.empId = empId == null ? null : empId.trim();

    }

    public String getEmpName() {

        return empName;

    }

    public void setEmpName(String empName) {

        this.empName = empName == null ? null : empName.trim();

    }

    public String getEmpSexual() {

        return empSexual;

    }

    public void setEmpSexual(String empSexual) {

        this.empSexual = empSexual == null ? null : empSexual.trim();

    }

    public String getEduEducation() {

        return eduEducation;

    }

    public void setEduEducation(String eduEducation) {

        this.eduEducation = eduEducation == null ? null : eduEducation.trim();

    }

    @Override

    public String toString() {

        return "Employee{" +

                "empId='" + empId + '\'' +

                ", empName='" + empName + '\'' +

                ", empSexual='" + empSexual + '\'' +

                ", eduEducation='" + eduEducation + '\'' +

                '}';

    }

}

演示：

后台接收后打印的值：

第二种方式：(使用form表单)

创建一个实体类 将Employee封装起来

FormBean

package com.oukele.model;

import java.util.List;

public class FormBean {

    private List<Employee> employeeList;

    public List<Employee> getEmployeeList() {

        return employeeList;

    }

    public void setEmployeeList(List<Employee> employeeList) {

        this.employeeList = employeeList;

    }

}

前端代码：

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

<html>

<head>

    <title>Title</title>

</head>

<body>

<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>

<form action="/zhoumo/c" method="post" id="myform">

    <table>

        <thead>

            <th>编号</th>

            <th>姓名</th>

            <th>性别</th>

            <th>学历</th>

            <th>增加</th>

            <th>移除</th>

        </thead>

        <tbody id="data1">

            <tr>

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

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

                <td>

                    <select name="empSexual">

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

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

                    </select>

                </td>

                <td>

                    <select name="eduEducation">

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

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

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

                    </select>

                </td>

                <td><input type="button" onclick="addElement(this);" value="+"></td>

                <td><input type="button" value="-" onclick="delElement(this)"></td>

            </tr>

        </tbody>

    </table>

</form>

<p><input type="button" id="btn_add" value="批量添加"></p>

</body>

<script>

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

        //获取行

        var rows = $("#data1 tr");

        //循环每一行

        $(rows).each(function (index,obj) {

            //将每一行中的 input[type='text'],select的对象取出,再进行一次循环

            $("input[type='text'],select",obj).each(function (i,o) {

                //当前对象 添加 name 属性值 name =employeeList[索引].对应的属性值

                $(o).attr("name","employeeList["+index+"]."+$(o).attr("name"));

            })

        });

        //提交

        $("#myform").submit();

    })

    //复制tr节点的内容

    function addElement(x){

        $(x).parents("tr").clone().appendTo($("#data1"));

    }

    //移除tr节点

    function delElement(x){

        $(x).parents("tr").remove();

    }

</script>

</html>

后台代码：

    //访问test页面

    @RequestMapping(path="/c",method = RequestMethod.GET)

    public String test1(){

        return "test1";

    }//接收test页面的form传递过来的值

    @RequestMapping(path = "/c",method = RequestMethod.POST)

    public String Receive1(FormBean formBean){

        for (Employee employee : formBean.getEmployeeList()) {

            System.out.println(employee);

        }

        //重定向

        return "redirect:/zhoumo/c";

    }

演示：

前端 form表单 提交

后端：

后台还有Map接收的方式，不过我忘了。有点尴尬了。希望路过的大佬有想法能贴出来一下，一起学习（本人菜鸟一枚）>..<

spring MVC 后端 接收 前端 批量添加的数据（简单示例）的更多相关文章

  1. Spring MVC 后端获取前端提交的json格式字符串并直接转换成control方法对应的参数对象

    场景: 在web应用开发中,spring mvc凭借出现的性能和良好的可扩展性,导致使用日渐增多,成为事实标准,在日常的开发过程中,有一个很常见的场景:即前端通过ajax提交方式,提交参数为一个jso ...

  2. spring mvc 后端获得前端传递过来的参数的方法

    1.通过HttpServletRequest 获得 HttpServletRequest.getParameter(参数名),可以获得form表单中传递的参数,或ajax或url中传递过来的参数,如果 ...

  3. 【转载】spring mvc 后端获得前端传递过来的参数的方法

    1.通过HttpServletRequest 获得 HttpServletRequest.getParameter(参数名),可以获得form表单中传递的参数,或ajax或url中传递过来的参数,如果 ...

  4. C#后端接收前端的各种类型数据

    前端往后端提交数据的方式常用的就这么三种:1.form提交:2.url参数提交:3.json提交 1.针对表单form方式的提交 在后端使用Request.Form的方式接收,比如 前端代码片段: v ...

  5. Spring MVC同时接收一个对象与List集合对象

    原:https://blog.csdn.net/u011781521/article/details/77586688/ Spring MVC同时接收一个对象与List集合对象 2017年08月25日 ...

  6. Spring MVC在接收复杂集合参数

    Spring MVC在接收集合请求参数时,需要在Controller方法的集合参数里前添加@RequestBody,而@RequestBody默认接收的enctype (MIME编码)是applica ...

  7. ASP.NET MVC用存储过程批量添加修改数据

    用Entity Framework 进行数据库交互,在代码里直接用lamda表达式和linq对数据库操作,中间为程序员省去了数据库访问的代码时间,程序员直接可以专注业务逻辑层的编写.但是对于比较复杂的 ...

  8. Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装

    阅读目录 1. 通过HttpServletRequest获得请求参数和数据 2. 处理方法形参名==请求参数名 3. 如果形参名跟请求参数名不一样怎么办呢?用@RequestParam注解 4. 用实 ...

  9. 0056 Spring MVC如何接收浏览器传递来的请求参数--request--形参--实体类封装

    浏览器总会向服务器传递一些参数,那么Spring MVC如何接收这些参数? 先写个简单的html,向服务器传递一些书籍信息,如下: <!DOCTYPE html> <html> ...

随机推荐

  1. 机器学习实战笔记——KNN约会网站

    ''' 机器学习实战——KNN约会网站优化 ''' import operator import numpy as np from numpy import * from matplotlib.fon ...

  2. eve-ng

    eve-ng   eve-ng采用的是和web-iou一样的B/S模式,进步的地方是它只需拖动鼠标就可以搭建拓朴,比web-iou要直观.     此虚拟机已经集成了IOL的L2.L3以及vIOS的L ...

  3. java学习-2

    类的定义 成员变量: 变量类型 变量名称 成员方法:public void 方法名称(){} 注意:成员变量是直接定义在类当中方法外面 创建对象使用类 导包.指出需要的类在什么位置 import 包名 ...

  4. HDU 1284 钱币兑换问题 （动态规划 背包方案数）

    钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  5. C++四种类型转换总结

    C风格的强制类型转换很简单,均用 Type b = (Type)a 形式转换.C++风格的类型转换提供了4种类型转换操作符来应对不同场合的应用,如下表: 转换类型操作符 作用 const_cast 去 ...

  6. 01：keepalive高可用集群

    1.1 keepalived高可用软件介绍 1.keepalived--监控检查 注:keepalive软件有两种功能:监控检查.VRRP冗余协议 1. keepalive的作用是检测web服务器的状 ...

  7. spark教程(15)-Streaming

    Spark Streaming 是一个分布式数据流处理框架,它可以近乎实时的处理流数据,它易编程,可以处理大量数据,并且能把实时数据与历史数据结合起来处理. Streaming 使得 spark 具有 ...

  8. redis 学习（13）-- BitMap

    BitMap 什么是 BitMap BitMap,即位图,其实也就是 byte 数组,用二进制表示,只有 0 和 1 两个数字. 如图所示: 重要 API 命令 含义 getbit key offse ...

  9. oracle查看执行计划以及使用场景

    文档结构: oracle执行计划使用场景 环境: Centos 6.10 Oracle 18.3.0.0.0 c 11g默认启动了自动统计信息收集的任务,默认运行时间是周一到周五晚上10点和周6,周天 ...

  10. sql--index 索引

    CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...