第一种方式：(使用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. python学习之数据类型（int，bool，str）

    第三章 数据类型 3.1 Python基本数据类型 类型 含义 描述 int 整数 主要用来进⾏数学运算 str 字符串 可以保存少量数据并进⾏相应的操作 bool 布尔值 判断真假,True,Fal ...

  2. Python学习之认知（一）

    第二章(一) 2.1 python介绍 2.1.1 python是一种什么样的语言 ​ 编程语⾔主要从以下几个⻆度为进行分类,编译型和解释型.静态语言和动态语⾔.强类型定义语言和弱类型定义语言. 编译 ...

  3. Cisco 三层交换机划分VLan与普通路由器连接配置

    根据一些中小企业的一些业务需求,设计一套方案: 计划目标:针对不同部门划分不同的VLAN,前期满足能够同时上网的需求,后期需要能够隔离不同部门的资源访问(本次配置操作不涉及). 因之前未接触CISCO ...

  4. 【Linux开发】linux设备驱动归纳总结（三）：3.设备驱动面向对象思想和lseek的实现

    linux设备驱动归纳总结(三):3.设备驱动面向对象思想和lseek的实现 一.结构体struct file和struct inode 在之前写的函数,全部是定义了一些零散的全局变量.有没有办法整合 ...

  5. [Python3] 039 语法调试

    目录 语法调试 1. 调试技术 2. pdb 调试 插一个 gdb 3.Pycharm 调试 4. 单元测试 语法调试 1. 调试技术 调试流程 单元测试 → 集成测试 → 交测试部 分类: 静态调试 ...

  6. 【Linux 网络编程】常用TCP/IP网络编程函数

    (1)函数socket /**************************************************************** ** 功能:创建一个套接字用于通信 ** 参 ...

  7. PTA(Basic Level)1041.考试座位号

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考 ...

  8. oracle 插入数据之坑--------oracle字符类型varchar2一个中文占多少字节

    如果你误认为是两个字节,那就大错特错了 Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定 查看oracle server端字符集 select userenv('langu ...

  9. C++练习 | 不使用头插法逆转单链表

    void D(PBook pHead) { PBook p,q,s; p=pHead->next->next; q=p->next; s=q->next; pHead-> ...

  10. vue-router和webpack懒加载，页面性能优化篇

    在vue单页应用中,当项目不断完善丰富时,即使使用webpack打包,文件依然是非常大的,影响页面的加载.如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加 ...